如何在網站上播放通知聲音？

當某個事件發生時，我希望我的網站向用戶播放短時間通知聲音。如何在網站上播放通知聲音？

聲音應該不是當網站打開時自動啓動（即時）。相反，它應該通過JavaScript按需播放（當發生某些事件時）。

重要的是，這也適用於舊版瀏覽器（IE6等）。

所以，基本上有兩個問題：

我應該使用什麼編解碼器？
嵌入音頻文件的最佳做法是什麼？（<embed>與<object>與閃存與<audio>）

來源

2012-04-11 Timo

Downvoter謹慎解釋我的問題出了什麼問題？ – Timo 2012-04-11 11:56:15

我發現了一個很優雅的解決方案，適用於幾乎所有的瀏覽器（即使沒有安裝Flash的）。

我在Chrome，Safari，Firefox，Opera和IE6上測試過。

這是HTML5 <audio>標籤的較新的瀏覽器和<embed>標籤回退的混合舊的瀏覽器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

    <head> 
     <title>Audio test</title> 

     <script type="text/javascript"> 
      /** 
      * @param {string} filename The name of the file WITHOUT ending 
      */ 
      function playSound(filename){ 
       document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></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>

由於編解碼器我用MP3爲Chrome，Safari和IE瀏覽器。對於Firefox和Opera我使用了OGG。

來源

2012-04-11 13:56:18 Timo

好的答案。在這種情況下，雖然打開頁面時聲音會立即播放 - 但我假設您演示瞭如何，僅用於演示目的。 – Stefan 2012-04-11 15:47:25

@Stefan這是正確的，但可能會令人困惑。我會從我的答案中刪除。感謝提示。 – Timo 2012-04-11 16:09:42

完美答案bro ............很棒....... 謝謝 @valmar – 2013-01-10 09:49:17

使用audio.js這對於<audio>標籤回退到閃了填充工具。

一般來說，看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills爲polyfills到HTML 5層的API。（它包括多個<audio> polyfills）

來源

2012-04-11 11:58:43

恩，這不會在未安裝Flash的IE6上工作。 – Timo 2012-04-11 12:00:42

啊..對不起..不明白你想要一個本地解決方案.. – 2012-04-11 12:10:59

如何對雅虎的媒體播放器只是嵌入雅虎的圖書館

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

而且使用它像

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

自動啓動

$(function() { $("#beep").click(); });

來源

2012-04-11 15:49:59 Starx

也是一個很好的解決方案，但它可以隱藏該鏈接？我想如果你爲它設置了'display：none'，它就不會再播放了。此外，雅虎媒體庫顯示鏈接左側的一個小「播放」圖標.. – Timo 2012-04-11 16:14:07

@valmar：'visiblity：hidden;'是您的答案 – Starx 2012-04-11 16:22:07

還有一個插件，播放通知聲音在網站上：Ion.Sound

優點：

JavaScript的插件，用於基於Web的音頻API回退到HTML5音頻播放聲音。
插件正在使用最流行的桌面和移動瀏覽器，並且可以在任何地方使用，從常見的網站到瀏覽器遊戲。
包括音頻支持。
沒有依賴（不需要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");

來源

2014-06-16 23:59:54

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

來源

2016-02-25 11:17:06 ramancha

玩跨瀏覽器兼容的通知

正如勸通過@Tim來自this的Tisdall發帖，檢查Howler.js插件。

Chrome瀏覽器禁用javascript執行時最小化或不活動performance改進。但即使瀏覽器處於非活動狀態或用戶最小化，它也會播放通知聲音。

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

       sound.play();

希望可以幫助別人。

來源

2016-07-25 15:20:36 stom

「即使瀏覽器處於非活動狀態或最小化狀態，播放通知聲音」如何？聲音可能在頁面睡着時被調用，但調用'sound.play（）'的代碼是如何運行的？ Howler是否將所有setTimeout放入包裝中？ – poshest 2017-08-07 09:43:30

@poshest，我不知道它如何發揮，可能是檢查源代碼或聯繫插件的作者可能會幫助你。 – stom 2017-08-07 10:08:06

好的，謝謝。只是你提到了這個特性並且鏈接了其他的Stackoverflow答案，但是它並沒有在[Howler文檔]（https://github.com/goldfire/howler.js/）中作爲一個特性被提及，所以我認爲你知道一些東西特別關於它。 – poshest 2017-08-07 12:01:43

截至2016年，以下就足夠了（你甚至都不需要嵌入）：

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

查看更多here。

來源

2016-09-02 06:50:02 weltschmerz

如何在網站上播放通知聲音？

回答

相關問題