JavaScript | HTML5のaudioで音声ファイルを再生する方法

2021-02-032023-08-28JavaScript Audio,JavaScript

HTML5のaudioをJavaScriptで制御して音声ファイルを再生する方法の動作サンプルとサンプルコードです。

See the Pen JavaScript | Play an audio file by yochans (@yochans) on CodePen.

音声ファイルを再生する方法

HTML5のaudioをJavaScriptで制御して音声ファイルを再生するサンプルコードです。

現在、多くのブラウザでaudio機能はユーザーのアクションなく自動で再生する事は不可能となっています。

サンプルでは再生ボタンを用意してaddEventListenerで作成したクリックイベントを取得、音声ファイルを再生しています。

<button class="btns" id="play-btn">play</button>

//play button
const play_btn = document.querySelector('#play-btn');

//audio file
let sound = new Audio("https://raw.githubusercontent.com/Yousuke777/sound/main/kansei.mp3");

//play event
play_btn.addEventListener( 'click' , play );

function play(){
	sound.play();
}

音声ファイルの読み込みには「new Audio()」を利用します。

let sound = new Audio("https://raw.githubusercontent.com/Yousuke777/sound/main/kansei.mp3");

音声ファイルの再生は「play()」を使用します。

sound.play();

ブラウザ別の対応状況

ブラウザ別、HTML5 audioで対応しているファイルフォーマットです。

参考 : Firefox で HTML5 の音声と動画を再生する | Firefox ヘルプ

参考 : HTML5オーディオ – Wikipedia