HTMLAudioElement - Javascript

Audio() コンストラクタ

HTML に audio 要素を記述せずに、HTMLAudioElement のコンストラクタで生成することができます。

コンストラクタの作成方法

const myAudio = new Audio('sample.mp3');

const audio = new Audio();
audio.src = 'sample.mp3';
audio.controls = true;
document.getElementById('target').appendChild(audio);

イベント

イベント名	発生
audioprocess	ScriptProcessorNodeの入力バッファーの処理の準備ができた。
canplay	ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。
canplaythrough	ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。
complete	OfflineAudioContextのレンダリングが終了した。
durationchange	duration属性が更新された。
emptied	メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのためにHTMLMediaElement.loadメソッドが呼び出された場合など。
ended	メディアの末尾に達したために再生が停止した。
loadeddata	メディアの最初のフレームが読み込み終わった。
loadedmetadata	メタデータを読み込み終えた。
pause	再生が一時停止した。
play	再生が始まった。
playing	データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。
ratechange	再生レートが変更された。
seeked	シーク操作が完了した。
seeking	シーク捜査が始まった。
stalled	ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。
suspend	メディアデータの読み込みが停止した。
timeupdate	currentTime属性で示されている時刻が更新された。
volumechange	音量が変更された。
waiting	一時的なデータの不足により、再生が停止した。

sample

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>Document</title>
</head>
<body>
  <p><button type="button" id="btn">button</button></p>
</body>
</html>

script.js

window.onload = function(){
  let btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    const audio = new Audio('./sample.mp3');
    audio.volume = 0.5;
    audio.play();
  });
}