こんにちは！
第４回では、if文が必要になる10面ダイスを作りました（https://cthuwebdice.com/javascripts/webdice-04/）。
今回は、ダイスを転がした時に音を鳴らしてみましょう！

ダイスの音を鳴らしましょう

「ダイスロール」ボタンを押すと、ダイスがコロコロと転がるような効果音をつけます。
効果音を鳴らすために、こちらのサイト様を参考にさせていただきました。

参考にしたサイト：
HTML5のaudio要素で効果音を鳴らす
All About様（http://allabout.co.jp/gm/gc/385187/）

(1)HTMLにmp3、wavファイルを読み込みましょう！

まず、効果音に使う音声ファイルを用意しましょう。
このサイトでは、下記の無料音声素材をお借りしています。

ニコニコモンズ　ウッドダイスP様　http://commons.nicovideo.jp/material/nc42340

ダウンロードした音声ファイルの名前を、分かりやすいように「dice.wav」などの名前に変えて、「img」フォルダの中に入れておきます。
上記からダウンロードできるのはwavファイルですので、可能であれば、エンコードをしてmp3ファイルも用意しておきましょう。
（デバイスによっては、wavファイルが再生できない場合があるためです）

それでは、HTMLに効果音ファイルを読み込みましょう。
HTML5に用意されているaudio要素を使うと、とても簡単に音声ファイルを扱うことが出来ます！

下記のタグを、HTMLのbody内に記述します。
場所はどこでも構いませんが、デザインが崩れないように、ヘッダー要素の真下か、フッターの直前あたりが良いかもしれませんね。

audio要素に、「DiceSound」というidを振っておきます。
あとでこのid「DiceSound」に対して、javascriptでプログラムを書いていきます！
audio要素のpreload属性をautoにすることで、再生するファイルを事前に読み込んでおくことができます。

また、ここでwavファイルとmp3ファイルの、両方を読み込んでおきましょう！
wavファイルが再生されないデバイスではmp3ファイルが、mp3ファイルが再生されないデバイスではwavファイルが再生されます。

(2)ボタンにトリガーを仕掛けましょう！

次に、ボタンを押したときに音がなるように、クリックした時にアクションを起こすトリガーとなるonclick属性を書き足しましょう！
HTMLの1D6ダイスの部分に、下記のコードを追記します。

３行目のonclick属性に「ring();」という名前のトリガーを追記しました！
これで、「ダイスロール」ボタンをクリックした時に音を鳴らすためのトリガーができました。

(3)音を鳴らすためのjavascriptを書きましょう！

「dice.js」の一番上に、下記のコードを追記しましょう。

「ring」というトリガーが引かれたら、「DiceSound」というidの振られた音声ファイルを再生しなさい、というプログラムです。
「ring」は「ダイスロール」ボタンがクリックされた時に発動するように仕掛けましたので、たったこれだけで音を鳴らすことができるようになりました！

(4)再生する音声ファイルの音量を下げましょう

本当はこれだけで終わりでもいいのですが、この音量でプログラムを作ったところ、友人から「もう少し音量を下げてほしい」といわれました。
ですので、音量を下げるためのプログラムを追記してみましょう。

「dice.js」のfunction ring()の部分に、下記のコードを追記しましょう。

まず、３行目の

↑このコードで、「DiceSound」というidが振られた音声ファイルを、一旦「dicering」という名前の変数に格納します。
「document.getElementById(“DiceSound”);」のままだと、volumeプロパティで扱うことが出来ないからです。

４行目のvolumeプロパティで、音量を下げます。

volumeプロパティは、0.0（無音）から1.0（最大）まで指定することができます！

これで、ダイスの音量を下げることが出来ました。

(5)音声コントロールパネルをつけましょう！

ダイスの音量を下げることが出来るようになりましたが、場合によってはミュートにして使いたいこともありますよね！
プレイヤーが自分で音量をコントロールできるように、コントロールパネルを付けてみましょう！
HTML5では、簡単に音声をコントロールできるパネルを設置することが出来ます。

HTMLに、下記のコードを追記して下さい。

audio要素に、controls属性を足すだけです。
たったこれだけで、音量の変更や音声の一時停止などができるコントロールパネルが表示されちゃいました！
iPhoneなど、デバイスによってはコントロールパネルが使えない場合がありますので、その場合はスマホ本体の音量によって操作していただくように一言添えたら親切かもしれません。

いかがでしたでしょうか！
とても簡単に、WEBダイスを作成することができましたね。
少し応用することで、当サイトの「キャラクターシート」のように、出てきた出目で演算した結果を表示するタイプのダイスも作ることができます。

ぜひ、好きなダイスの画像や音声で、自分の好きなWEBダイスを作ってみてくださいね！