【JavaScript】音声の取り扱いについて(再生・停止・制御)

JavaScript

はじめに

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

以上、ログになります。
これからも継続していきましょう!!

JavaScriptフロントサイド関連
おすすめIT本
良いコード/悪いコードで学ぶ設計入門

「ITエンジニア本大賞2023」技術書部門で大賞を受賞した本です。
・コードの可読性
・普段意識したほうが良いこと
・リファクタリング考え方
等、普段のコードを設計する際に意識することが書かれています。
コードのあるべき姿に迷ったら一度読んでみると良い本です。

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

Dockerって何?となったときに私が最初に読んだ本です。
Dockerがどんな仕組みで動いているのか、コマンドでは何を命令しているのかを理解できるように、イラストを多用して説明しています。

1冊ですべて身につくJavaScript入門講座

「ITエンジニア本大賞2024」技術書部門で大賞を受賞した本です。
私が次に読もうと思っている本なのでおすすめとして挙げておきたいと思います。

コメント

タイトルとURLをコピーしました