WEBデザイン スクリプト

HTML5のaudioタグで効果音の出るボタンを設置する方法

2019年1月23日

クリックすると音がなるWebサイト。一昔前ならJavaアプレットでauファイルを読み込んで~、もしくはフラッシュで作ったり~とちょっと敷居が高い印象でしたが、HTML5では割と簡単に設置できますのよ。

HTML5で効果音の出るボタンを設置する方法〜ソースコード有り

audioタグで音声ファイルが扱えるように

HTML5からは動画なども簡単に扱えるようになりましたが、音声ファイルも「audioタグ」で同様に標準でサポートされています!簡単だ!

audioタグはHTMLに音声ファイルを埋め込むために使用し、複数の音源を扱うことができます。

src 属性でファイルのパスを指定するか、 <source> 要素を使用してファイルを指定します。 <source> で複数の音声を指定した場合、ブラウザーがもっとも適切な音源を選択します。

srcで指定

srcで指定

<audio id="sound-1" controls src="sounds/arigato.mp3" preload="auto">

<source>要素で複数指定

<audio id="sound-1" controls preload="auto">
    <source src="sounds/arigato.mp3" type="audio/mp3">
    <source src="sounds/arigato.wav" type="audio/wav">
</audio>

結果

audioタグに「controls」を含めると、コントロールが表示される。
含めない場合はバックグラウンドに読み込まれ、JavaScript等で制御します。

JavaScriptのonClickイベントに効果音を設定

というわけで、今回こんなやつを作ってみました。

デモはこちら

https://minagawa.design/button/

複数のボタンにそれぞれ違う効果音を割り当てるので、音源も3つ読み込みます。

<audio id="sound-1" preload="auto">
    <source src="sounds/arigato.mp3" type="audio/mp3">
</audio>
<audio id="sound-2" preload="auto">
    <source src="sounds/aishiteru.mp3" type="audio/mp3">
</audio>
<audio id="sound-3" preload="auto">
    <source src="sounds/oishii.mp3" type="audio/mp3">
</audio>

それぞれidに連番をふります。あとでJavaScriptで扱いやすくするためです。

ボタン画像をクリックしたときに音声を再生させるには、JavaScriptのonClickイベントが発生したときに、音声が再生される関数を割り当てて再生されるようにします。

今回は「soundbell()」という関数を割り当ててます。

<div id="btn01"><img src="images/btn01.png" onclick="soundbell(1)" alt="ありがとう"></div>
<div id="btn02"><img src="images/btn02.png" onclick="soundbell(2)" alt="愛してる"></div>
<div id="btn03"><img src="images/btn03.png" onclick="soundbell(3)" alt="おいしい"></div>

そして、JavaScriptです。headタグ内に記述します。(jQueryは読み込んでおいてね)

<script>
function soundbell(n)
{
  // 割り当てるID名(引数のnを連結して指定)
  var id = 'sound-'+n ;
  // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく
  if( typeof( document.getElementById( id ).currentTime ) != 'undefined' )
  {
    document.getElementById( id ).currentTime = 0;
  }
  // [ID:sound-file]の音声ファイルを再生[play()]する
  document.getElementById( id ).play() ;
}
</script>

こんな感じで、それぞれの画像をクリックしたときに対応した音声ファイルが再生されるという仕組み。すごく簡単!

今回は画像にアクションを設定していますが、buttonタグやAタグとかでももちろん可能ですし、onClickイベント以外でも、onloadやonfocusなどでもなんか音を鳴らすことは出来るでしょうね。

ただ、ゲームとかじゃない限りあまり音が鳴りすぎるサイトって不快なのでほどほどにしましょうね!僕も気をつけます!

オンラインスクールなら自宅で無料体験もできます

「現場のことは現場で学べ」といいますけど、まずある程度の知識がないと現場でも質問の仕方や何を学びとったらいいのかがわからないこともあると思います。
独学で知ることができないことは現場以外にもWEBデザインのスクールなどでも学べますが、オンラインで自宅にいながらリモートで学習できるという環境も増えてきていますので、自分のライフスタイルに合えばそういう選択もありですね。

【TechAcademy】は、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのこと。
あくまで「最短」なので、もっと学びたいと思えば学ぶことも出来るでしょう。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。

もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-WEBデザイン, スクリプト
-

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.