くだらない音声を流すためにボタンを押したら音が流れるようにしたかった
クリックしたら音声が流れるJava Scriptを書く
今回は、目次も必要ないくらい簡潔な内容です。
ただただ、HTMLでボタンを用意してボタンをクリックしたら音声が流れるだけのwebアプリを書きました。
まずは、ランダムに音声データが流れるための機構。
Java Scriptのコードは、相変わらずコピペで対応。
今回も知恵袋が役に立ちました。ありがとう、知恵袋。いつも助かってます。
こいつを仕込んで、ランダムの音声は終わり。
今回も要素を並べて、math.randomで作った乱数をmath.floorで丸めて発生させるところまでは同じで、.playで音声が再生される仕組みのようです。
次に、ランダムで流れる音声を個別に流すための仕組みを組み込むことにしました。
組み込むというか、それができそうなコードをコピペするだけですが……
こちらの記事を参照して、スクリプトを用意しました。
今回流したかった音声ファイルは、４つだったのでHTMLのbuttonを４つ用意して、それぞれに音声ファイルを対応させます。
Java Scriptでは、対応するHTMLをidで取得してwindow.onloadで指示したfunctionが機能するようにするスクリプトのようでした。
コピペを４回して、ボタンを作り、最後に音声ボタンが機能することを確認しました。
音声が流れない
さてさて、できたボタンを上から押していくと、最後のボタン以外は全く効かないことに気づきました。
すると、どうやらwindow.onloadは重複しないことが判明しました。
「だいたい、いつもaddEvenListenerという指示だったのに今回は違うんだな…」と思っていたところだったので、onloadの部分をaddEvenListener{'load', function(){に書き換えて、voila!うまくいきました。
と思ったら、今度は、作ったボタンのうち最初の２つが効きません。
「うーんなんでだろう？」と思い、とりあえずChromeで検証すると、どうやらJSが効いてないみたいです。
「そんなはずは…下の２つは効いてるのに！」と思いながらググってみると、どうやらHTMLが上から流れて処理されてくる間に順序の問題でJSが効かなくなることがあるようです。
idよりも先にclassをつけてCSSで形式を整えていたので、classとidを入れ替えてみることにしました。
するとどうでしょうまるで何事もなかったように音声が流れるではありませんか！
ということでランダムに流れるボタン、それぞれ流れるボタンが実装されました。
改善案
今回のスクリプトでは、音声を連続再生できません。
ボタンを押すと音声が１度流れ、１−２秒待たないとボタンを押した時に最初の数ミリ秒が欠けた状態で再生されます。
これではあまり面白くないので、「ボタンを押したよ〜！」という音声がDJのスクラッチみたいに「ボボボ、ボボボ、ボタ、ボタ、ボタンを、ボボボ」とできるようにしたいですね。
（どうやるのかはさっぱり分かりませんが……）
まとめ:今回はランダムだけじゃなくて1対1対応
これまでモノポリーツールを作っていると、ゲームの都合上、整数に丸めた乱数を発生させて対応する文章や画像を表示させる必要がありました。
今回は、別に制約があるわけでもないので、ランダムに再生する機能と１対１で対応する機能を載せてみました。
音声ファイルは自分の肉声であること、あまりにもくだらない内容のため、いつものGithubアカウントにさえ投げず、新しいアカウントを取得してPagesを立ち上げました。
なので「今回はこんな奴です！」というアピールは避けることにしましょう。
