[解決済み] Webサイトで通知音を鳴らすには？

質問

あるイベントが発生したときに、Webサイトで短い通知音を鳴らすようにしたいのですが、可能でしょうか？

サウンドは ではない ウェブサイトが開かれたときに自動で（即座に）開始されます。 代わりに、JavaScriptで必要に応じて（特定のイベントが発生したときに）再生される必要があります。

これが古いブラウザ（IE6など）でも動作することが重要です。

というわけで、基本的には2つの質問があります。

1. どのようなコーデックを使用すればよいのでしょうか。
2. 音声ファイルを埋め込むためのベストプラクティスは何ですか？( <embed> vs. <object> vs フラッシュ vs. <audio> )

どのように解決するのですか？

2021年の解決策

function playSound(url) {
  const audio = new Audio(url);
  audio.play();
}

<button onclick="playSound('https://your-file.mp3');">Play</button>  

ブラウザのサポート

Edge 12+、Firefox 20+、Internet Explorer 9+、Opera 15+、Safari 4+、Chrome

コーデックのサポート

MP3のみ

古い解決策

(レガシーブラウザ用)

function playSound(filename){
  var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
  var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
  var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
  document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}

<button onclick="playSound('bing');">Play</button>  
<div id="sound"></div>

ブラウザのサポート

• <audio> (モダンブラウザ)
• <embed > (フォールバック)

使用されるコード

• Chrome、Safari、Internet Explorerに対応したMP3です。
• Firefox および Opera 用の OGG。