Webサイトで通知音を再生するにはどうすればよいですか？

108

特定のイベントが発生したときに、ウェブサイトでユーザーに短い通知音を鳴らしたい。

Webサイトを開いたときに、サウンドが（すぐに）自動起動しないようにする必要があります。代わりに、JavaScriptを介してオンデマンドで再生する必要があります（その特定のイベントが発生したとき）。

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

したがって、基本的に2つの質問があります。

  1. どのコーデックを使用すればよいですか？
  2. オーディオファイルを埋め込むためのベストプラクティスは何ですか？（<embed>vs. <object>vs.フラッシュvs. <audio>）
javascript  html  audio  notifications  html5-audio 
— ティモ
ソース
あなたは試すことができますgithub.com/VJAI/musquito
— VJAI

回答:

98

このソリューションは、ほとんどすべてのブラウザーで動作します（Flashがインストールされていなくても）。

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      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>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

ブラウザのサポート

  • <audio> （最新のブラウザ）
  • <embed>（フォールバック）

使用されるコード

  • Chrome、Safari、Internet Explorer用のMP3。
  • FirefoxおよびOpera用のOGG。
— ティモ
ソース
素敵な答え。この場合、ページを開くとすぐにサウンドが再生されますが、デモの目的で、その方法を示すことを想定しています。
— ステファン
@Stefan正しいですが、混乱するかもしれません。私の答えからそれを削除します。ヒントをありがとう。
— Timo
ソリューション@valmarに感謝します
— Jagdeep Singh
@DavidLarsson特定のコーデックを読み取れないブラウザがあるため。
— Timo
2
Internet Explorerバージョン8で動作させることができませんでした
— Md。Arafat Al Mahmud
83

2016年の時点では、以下で十分です（埋め込む必要はありません）。

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

詳細はこちら。

— Weltschmerz
ソース
また、これを行う前に、オーディオが定義されているかどうかも確認してください。
— Christophe Roussy、2018年
1
これは素晴らしい答えなので、シンプルで完璧に機能します。
— ポラリス
3
動作しなくなったUncaught (in promise) DOMException
— ジャックブランク
2
最新のChrome（バージョン74.0.3729.169）で試してみたところ、うまくいきました。
— weltschmerz
それは、クロム、FFとオペラに正しく動作し、その答えは、通知スクリプトはおそらく間隔で呼び出されるようにあなたの体のタグにオーディオタグを付加し続けるようたくさん受け入れ答えよりも良いアプローチです
— ムハンマドオマールアスラム
16

Webサイトで通知音を再生するためのもう1つのプラグイン：Ion.Sound

利点：

  • HTML5オーディオへのフォールバックを備えたWebオーディオAPIに基づいてサウンドを再生するためのJavaScriptプラグイン。
  • プラグインは、最も人気のあるデスクトップおよびモバイルブラウザーで動作しており、一般的なWebサイトからブラウザーゲームまで、どこでも使用できます。
  • オーディオスプライトのサポートが含まれています。
  • 依存関係なし（jQueryは不要）。
  • 25無料のサウンドが含まれています。

プラグインを設定します。

// set up config
ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

// And play sound!
ion.sound.play("my_cool_sound");
— カシオランディム
ソース
4

yahooのメディアプレーヤーはどうですか？yahooのライブラリを埋め込むだけです 

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

そしてそれを

<a id="beep" href="song.mp3">Play Song</a>

自動起動するには

$(function() { $("#beep").click(); });
— Starx
ソース
また、素晴らしい解決策ですが、そのリンクを隠すことは可能でしょうか？設定すればdisplay: noneもう音が出なくなると思います。また、Yahooのメディアライブラリーショーは、小さな「遊び」のアイコンがリンクの左...
— ティモ
@valmar：visiblity: hidden;答えです
— Starx
3

クロスブラウザ互換の通知を再生する

この投稿から@Tim Tisdallがアドバイスしたように、Howler.jsプラグインを確認してください。

クロムのようなブラウザはjavascript、パフォーマンスを向上させるために最小化または非アクティブになっていると実行を無効にします。ただし、ブラウザが非アクティブであるか、ユーザーによって最小化されている場合でも、通知音が再生されます。

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

希望は誰かを助けます。

— Shaijut
ソース
「ブラウザが非アクティブまたは最小化されている場合でも、これは通知音を再生しますか」ページがスリープ状態のときに呼び出された場合、サウンドが再生される可能性がありますがsound.play()、最初に、呼び出すコードはどのように実行されますか？ハウラーはすべてのsetTimeoutsをラッパーに入れますか？
— 最高級2017
@poshest、それがどのように機能するのかわかりません。ソースコードをチェックしている、またはプラグインの作者に連絡することが役立つかもしれません。
— shaijut 2017
1
はい、ありがとう。この機能について言及し、他のStackoverflowの回答をリンクしただけですが、ハウラーのドキュメントでは機能として言及されていないため、特別なことを知っていると思いました。
— 最高級2017
2

コードでイベントを呼び出す場合は、ユーザーがページ上にいないとブラウザが応答しないため、トリガーを作成するのが最善の方法です。

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

これで、サウンドを再生したいときにボタンをトリガーできます 

$('#playSoundBtn').trigger('click');
— スワン・エッサム
ソース
0 
var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

このコードはtalkerscodeからのものです完全なチュートリアルについてはhttp://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.phpをご覧ください

— ラマンチャ
ソース
0

次のように、Audioとオブジェクトを一緒に使用できます。

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

さらには追加addEventListenerのためplayとended

— モスタファ
ソース
0

私はサウンドを再生するためのクリーンで機能的な方法を書きました：

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}
— ジャック
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.