コピペで脱出ゲームを作る~音量を調節する・BGMを鳴らす~

どうも急に寒くなってすっかり秋ですね、僕です

今回はBGMを鳴らして音量の調節機能を付けようかなと思います
音を鳴らす回でやってもよかったのですがBGMだと一つ問題がありましてね

そう、容量です
って言っても数M程度ですからプレイする分にはいまどきのPCや回線なら影響はないと思いますが問題はアップロードなんですよね

web上で作成できるcode9leap、あそこファイル2Mまでですから下手するとあそこでは作れなくなります
じゃあローカルで作成すればいいじゃんとなりますが、ホームページも容量自体は無料でも500Mとか1Gだから余裕なんですがアップロードできる1ファイルの容量も決まっていてそれが結構小さい
私が使ってたfc2ホームページは1Mでした(有料版はもっと増えます)

そんなわけで出来なかったわけです
で、今回やろうと思ったのはウェブクロウというホームページだと3Mまで行けると知ったからなんですね
ありがとうウェブクロウ!ということで本編スタート!!
スライダーで音量を調節するやつです
こんな感じのやつ↓

コードがこちら(ページ開いた瞬間から音が鳴るとうるさいので上のやつにはタイトルページを挟んでます)

まず音量を調節するにはどうすればいいのかというところから説明しないといけませんね
コード内の実際に音を鳴らすところ、つまり各play()のあとに.volume = ○○;というのがありますね
まあボリュームですから見ればわかると思いますが、これで調節します
こちらに入る値は0~1の数字です、0が無音1が最大ですね


今回はsevolもしくはbgmvolを入れてますね、こちらは9・10行目で宣言した変数です
こちらの値を変更することでvolumeも変更されるわけですね
どう変更するか、というところが107・108行目です

bgmvol = (suraida.x - 100) / 320;

suraidaというのは24~61行目で作っているスライダーです
ドラッグして動かすものですね
こちらのx座標が変わることでbgmvol・sevolが変わりvolumeも変わるわけです

では計算を詳しく見てみましょう
x座標から100引いて320で割るというそれだけなんですが、100と320って何なの?ということですよね
こちらも単純です100はスライダー左端、320はスライダーが動かせる範囲(100~420)です
つまり無音の時suraida.xが100ですから(100-100)/320で0に、最大の時(420-100)/320で1になるわけです

ここまでご理解いただけたところでスライダーに移ります
29・32・46・49行目をご覧ください、()の中に今までなかった e が入ってますね
こちらは引数と言ってここではイベント(ontouchstartとか)の情報が入っている変数だと思ってください(詳しいことは私も理解してないのでググってね
今回はe.xを使っていますが、これはイベントをしたx座標を意味するわけです(要するにクリックした・ドラッグしている場所

ということで30行目に行きましょう、24行目で宣言した変数saiに値を入れています
値はクリックしたx座標からsuraidaのx座標を引いたものです
こちらはこの後ドラッグ中のイベントで使うものです

32行目ontouchmoveというのがドラッグのイベントです
中を見てみましょう、簡潔に言うとマウスカーソルの位置からsuraidaの位置を決めているだけです
ここに出てくるe.xは先ほどのe.xとは別物で、ドラッグしたx座標です
マウスを動かせばe.xも変わるわけです(要はマウスカーソルのx座標)
そこから先ほどのsaiを引いてその位置にsuraidaを移動させているのでマウスを動かせばsuraidaも動くわけです
しかし左端右端があるのでif文で端からはそれ以上動かないようにしているんですね
最後にSEの方はマウスを離した時に音量がわかるようにontouchendで音を出しています


次にBGMをループさせる方法です、96行目をご覧ください
ブラウザの対応状況に合わせて2パターン使っています
src(?)で再生できてるならloop=trueで、そうでないならenterframe内でplay()と、いうことなんですけど……
あのーこれについて書いてあったサイト見失ってしまいましてですね…… 詳しくは頑張ってググって見つけていただけますでしょうか?申し訳ない

スライダーじゃないバージョンは広告の後で
スポンサードリンク
    

ということでこんな感じにクリックするたびに音量が変わるやつですね
コードは先ほどのスライダーバージョンのスライダー部分をこう変えたものです(ページ開いた瞬間から音が鳴るとうるさいので上のやつにはタイトルページを挟んでます)
音量が違うのでsevol・bgmvolの初期値も変え、107・108行目もなしです
bgmvolとsevolに分ける必要はないのですがスライダーのやつをコピーして作ったからそのままです
説明はまあ、いらないでしょう

最後に注意点二つを、volumeの操作はplay()の後にしてください
再生してないのにやるとエラーになるみたいです(私はこれがわからず二日悩みました)

音ごとにボリュームの差をつけたい時はファイル自体の音量を調節するか(ググればフリーソフトとかがあります)
○○.volome = sevol * 0.7;とかにして下げちゃいましょう
というところで終わり、ありがとうございました
スポンサードリンク

関連記事
スポンサーサイト

Comment

Comment Form
公開設定

Trackback


→ この記事にトラックバックする(FC2ブログユーザー)