web-dev-qa-db-ja.com

Webサイトで通知音を再生する方法は？

特定のイベントが発生したときに、Webサイトでユーザーに短い通知音を再生するようにします。

Webサイトが開かれると、サウンドはnot auto-start（即座に）になります。代わりに、JavaScriptを介してオンデマンドで再生する必要があります（特定のイベントが発生した場合）。

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

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

  1. どのコーデックを使用すればよいですか？
  2. オーディオファイルを埋め込むためのベストプラクティスは何ですか？ （<embed> vs. <object> vs. Flash vs. <audio>）
javascripthtmlaudionotificationshtml5-audio
92
Timo

このソリューションは、ほとんどすべてのブラウザーで動作します（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。
91
Timo

2016年の時点では、次のもので十分です（埋め込む必要さえありません）：

let audio = new Audio('/path/to/audio/file.mp3');
audio.play();

詳しくは こちら をご覧ください。

60
dchacke

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

利点：

  • HTML5オーディオへのフォールバックを備えたWeb Audio 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");
14
Cassio Landim

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(); });
5
Starx

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

this postの@Tim Tisdallによるアドバイスのとおり、 Howler.js プラグインを確認してください。

chromeなどのブラウザは、 パフォーマンス の改善のために最小化または非アクティブになっている場合、javascriptの実行を無効にします。しかし、ブラウザが非アクティブまたはユーザーによって最小化されている場合でも、これは通知音を再生します。

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

               sound.play();

希望は誰かを助ける。

3
stom

audio.js を使用します。これは、フラッシュへのフォールバックを伴う<audio>タグのポリフィルです。

一般的に、HTML 5 APIへのポリフィルについては、 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills をご覧ください。（さらに<audio>ポリフィルが含まれます）

2
Gabriele Petrioli
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
ramancha

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

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

addEventListenerとplayにendedを追加することもできます

0
Mostafa

サウンドを再生するためのクリーンで機能的なメソッドを作成しました。

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;
}
0
Jack Nicholson