JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【JavaScript】ボタンをクリックするとサウンドファイルを再生するサンプルプログラム

f:id:vw-dsg:20200601063255p:plain

Audioでサウンドファイルを再生する

JavaScript でサウンドファイルを再生させるには「Audio」オブジェクトを使用します。まず、Audio()のコンストラクタをインスタンス化し、サウンドファイルを指定します。

サウンドファイルの再生方法はとてもシンプルです。

var my_audio = new Audio("test.wav");  //インスタンス化とサウンドファイルの指定

次に「play()」でサウンドファイルを再生します。基本的にこれだけです。

my_audio.play();  //サウンドファイルを再生

サンプルコード(JavaScript)

これは、ボタンが押されるとリンクされたサウンドファイルが再生されるサンプルプログラムです。

<script type="text/javascript">
    window.onload = function() {
        var my_audio = new Audio("サウンドファイルのURL");
            //ボタンにクリックイベントを設定
            document.getElementById("btn20200502").onclick = function() {
                my_audio.currentTime = 0;  //再生開始位置を先頭に戻す
                my_audio.play()//サウンドを再生
            }
    }
</script>

実行結果

下の「PUSH!」ボタンをクリックするとサウンド(こづつみの音)が再生されます。※完全にページのロードが終わってからクリックしてください。連打に対応しています。※現在はリンクに問題があるので再生はできません。

備考など

サウンドの再生が終わる前にもう一度先頭からサウンドを再生させたい場合は、「currentTime」プロパティに「0」をセットしてください。

END

宝くじ購入代行はドリームチャンス