ラック
Home > ブログ > 記事 > 2018年1月 > jQueryで音声ファイルを再生したい

jQueryで音声ファイルを再生したい

カテゴリ: ホームページ

表題の通り、JavaScript(というよりはjQuery)で音声を再生したいというシチュエーションが発生したので、そのやり方をメモしておきます。

今回のシチュエーションとしては、

  • ボタン1をクリック: ドラムロール再生
  • ボタン2をクリック: 決定音再生

というミニゲーム的なシチュエーションです。

そのため、/sound/ディレクトリにドラムロール音の「drumroll.mp3」、決定音の「decide.mp3」を配置してある、という状態とします。

動作はChromeでしか動作させないという限定的な使用法のため、wavファイルは用意していません。

HTML


<!-- ボタン -->
            <div class="button">
                <p class="btn-start" id="start">スタート!</p>
                <p class="btn-stop hidden" id="stop">ストップ!</p>
            </div>
<!-- /ボタン -->

<!-- 音声ファイルの読み込み(非表示) -->
<div class="sound hidden">
    <div class="audio">
        <audio id="roll" preload="auto">
	        <source src="./sound/drumroll.mp3" type="audio/mp3">
        </audio>
        <audio id="decide" preload="auto">
	        <source src="./sound/decide.mp3" type="audio/mp3">
        </audio>
    </div>
</div>
<!-- /音声ファイルの読み込み -->

JavaScript


//ドラムロールのSEを流す
function roll() {
    $("#roll").get(0).play();
}
//決定のSEを流す
function decide() {
    $("#roll").get(0).pause(); //一時停止
    $("#roll").get(0).currentTime = 0; //0秒まで巻き戻す
    $("#decide").get(0).play();
}
//メイン
$(function() {
    $("#start").on("click", function() { //スタートボタンクリック
            roll(); //ドラムロール開始
            startProcess(); //処理開始
        }
    });
    $("#stop").on("click", function() { //ストップボタンクリック
        decide(); //決定音
        stopProcess(); //処理停止
    });
});

こんな感じで実現したい動作を実装しました。ちょっと引っかかったのは決定したときにドラムロール音が鳴り続けているとあまりよろしくないので停止させる部分。.play()があるので.stop()があるかと思えば、ない。一時停止の.pause()と、0秒まで巻き戻す.currentTime = 0を組み合わせて実現する、という方法のようです。

参考

タグ: javascript,jQuery

 



関連する記事一覧