はじめに
Webで音声を扱いたい場面は多々存在します。JavaScriptを使えば、ボタン操作で音を鳴らしたり、ユーザーの操作に応じて再生・停止・音量調整などを簡単に行うことができます。
今回は、音声の取り扱いについてLogとして記載していきたいと思います。
音声の再生
音声の再生は <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
以上、ログになります。
これからも継続していきましょう!!
コメント