【jQuery】特定の要素をクリックした際に音を鳴らす方法

2020-04-12

今回は、ページ内で特定の要素をクリックした際に、音を鳴らす方法について、記載していきます。

サンプル

こちらになります。

方法

jQueryを使って実装していきます。

※jQueryを使うための準備については、下記よりご確認ください。

まず、HTMLのbody内に、下記のようにaudioタグを記述します。

<audio src="sample.mp3" id="play-button"></audio>

画面に表示されるわけではないので場所はどこでもいいのですが、最上部にまとめておくなどすると管理がし易いかと思います。

src属性にはファイルパス、idは任意の名前をそれぞれ記入します。

また、別にクリック対象を用意します。

<button type="button">再生</button>

音を鳴らすためのjQueryは下記のように記述します。

 　　$('button').click(function() {
        $("#play-button").get(0).play();
      });

$(“#play-button").get(0).play()
の記述で、「#play-button」のaudioタグに記載したsrc属性の音を鳴らすことが出来ます。

以上となります。