JavaScriptのAudioオブジェクトを使用して音声ファイルを再生

JavaScript

JavaScriptのAudioオブジェクトを使用して音声ファイルを再生するコードです。リンクをクリックしたら再生されます。

質問者する生徒
生徒

リンクをクリックさせて音声ファイルを再生させたいです!

回答する先生
先生

あまり使用するところが思いつかないですけど

質問者する生徒
生徒

猫の鳴き声専門素材サイトを作って、サンプルとして聞かせます。

回答する先生
先生

ではJavaScriptを使用して音声ファイルを再生していきましょう。

音声ファイル再生DEMO

回答する先生
先生

まだまだ!←をクリックしてください。音声ファイルが再生されます。

質問者する生徒
生徒

すごい!音声が再生されましたね。

HTML、JavaScriptコード

<a href="javascript:soundPlay('https://音声データのURL.mp3');">まだまだ!</a>
function soundPlay(url){
var sound = new Audio();
sound.src = url;
sound.play();
}

コードの解説

href=""内に、javascript:soundPlay('https://音声データのURL.mp3')soundPlay()関数と再生させるファイルのURLを設定して、リンクをクリックするとJavaScriptのsoundPlay(url)が実行されます。

var sound = new Audio()で、Audioオブエジェクトを作成します。
sound.src = urlで、srcプロパティに再生する音声ファイルを設定、今回はリンク設定されている音声ファイルのURLです。
sound.play()のplay()メソッドで音声ファイルを再生します。

質問者する生徒
生徒

HTMLとJavaScriptの記述だけで簡単ですね。

回答する先生
先生

複数表示したい場合はHTML部分をコピペして、音声ファイルのURLを変えるだけでいいですからね。

質問者する生徒
生徒

わかりました。ありがとうございます!