はじめに
Webで音声を扱いたい場面は多々存在します。JavaScriptを使えば、ボタン操作で音を鳴らしたり、ユーザーの操作に応じて再生・停止・音量調整などを簡単に行うことができます。
今回は、音声の取り扱いについてLogとして記載していきたいと思います。
体系的にJavaScriptを学びたい方には以下の教材がおすすめです：
👉1冊ですべて身につくJavaScript入門講座（Amason）
👉 スラスラわかるJavaScript（Amazon）
音声の再生
音声の再生は <audio> タグと play() メソッドを使って実現します。
html
<audio> 要素の src 属性に音声ファイルのパスを指定します。
<audio id="myMusic" src="music.mp3"></audio>
<button onclick="playMusic()">▶ 再生</button>
JavaScript
.play() は音声の再生を開始するメソッドです。
function playMusic() {
document.getElementById("myMusic").play();
}
音声の停止・最初から
pause() で音声を停止し、currentTimeで指定した時間へ戻すことができます。
html
<button onclick="pauseMusic()">⏸ 停止</button>
<button onclick="stopMusic()">⏹ 巻き戻し</button>
JavaScript
.pause() は現在の再生位置で一時停止し、.currentTime = 0 は再生位置を先頭に戻しています（秒単位）。
function pauseMusic() {
document.getElementById("myMusic").pause();
}
function stopMusic() {
const audio = document.getElementById("myMusic");
audio.pause();
audio.currentTime = 0;
}
音量の調整
音量は 0（ミュート）〜1（最大）で設定可能です。
html
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="changeVolume(this.value)">
JavaScript
.volume プロパティで音量を制御することができます。
function changeVolume(val) {
document.getElementById("myAudio").volume = val;
}
ループ再生
音声を繰り返し再生するには、loop 属性または .loop = true を使います。
html
loop 属性を追加するだけで、音声が繰り返されます。
<audio id="myMusic" src="music.mp3" loop></audio>
JavaScript
JavaScriptからでも 「.loop = true」と設定することで、同様に繰り返し設定ができます。
let audio = document.getElementById("myMusic");
audio.loop = true;
ロードの検知
音声ファイルが読み込まれたことを確認したい場合は、「onloadeddata」イベントを使用することが可能です。
JavaScript
let audio = document.getElementById("myMusic");
audio.onloadeddata = () => {
console.log("音声が読み込まれました");
};
再生終了の検知
音声の再生が完了したタイミングを検知したい場合は「onended」イベントを使用します。
JavaScript
let audio = document.getElementById("myMusic");
audio.onended = () => {
console.log("再生が終了しました");
};
まとめ
| 操作 | 方法・プロパティ |
| 再生 | .play() |
| 停止 | .pause() |
| 音量 | .volume |
| ループ | .loop = true |
| 再生準備 | .onended |
| 再生終了 | .onloadeddata |
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント