在不使用Flash的情況下嵌入音頻mp3

Question

什么是在html頁面中嵌入音頻mp3而不使用閃存而是使用自定義皮膚的好方法？ 它也應該在舊瀏覽器中部分工作

Answer 1

你應該看一下SoundManager 2 。

如果瀏覽器支持HTML5，它將使用HTML5，但如果必須，將降級為使用Flash。 最棒的是，它有一個API，無論哪種方式都相同。 我在一些項目上使用過這個工具，這太棒了。

這是他們的工作原理頁面的描述

問題：瀏覽器缺乏良好，一致的原生音頻支持。 （HTML 5的Audio（）是未來，但仍處於開發階段。）

解決方案： Javascript API使用HTML5 Audio（）+無頭Flash通過ExternalInterface，幾乎無處不在。 如果支持HTML5但不支持“非免費”MP3 / MP4格式，則使用閃存作為后備。

SoundManager 2包裝並擴展了Flash和HTML Audio Sound API，為Javascript提供了單一，統一的聲音API; API是相同的，無論HTML還是Flash最終用於播放聲音。 （閃存部分是隱藏的，對開發人員和最終用戶都是透明的。）

Answer 2

如果您想在舊瀏覽器中使用它，那么您必須提供Flash后備。 例如，您可以使用jPlayer來完成。 jPlayer支持：

• HTML5：mp3，m4a（AAC），m4v（H.264），ogv，oga，wav，webm
• Flash：mp3，m4a（AAC），m4v（H.264）

請記住，Firefox沒有本機MP3支持，因此如果您使用HTML5音頻，您還必須為Firefox和其他一些瀏覽器提供Ogg Vorbis。

Answer 3

我剛從Thomas Fuchs那里看過這篇文章，其中介紹了幾種通過Javascript播放音頻的方法，而不依賴於閃回。

以下是本文的要點。

移動瀏覽器
除非聲音是由用戶操作直接播放的，否則現在沒有解決方案（點擊）

瀏覽器支持HTML5 <audio>元素。
要求您提供三種不同格式的音頻。

if("Audio" in window){
  var a = new Audio();
  if(!!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')))
    a.src = "/sounds/ping.ogg";
  else if(!!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')))
    a.src = "/sounds/ping.mp3";
  else if(!!(a.canPlayType && a.canPlayType('audio/mp4;     codecs="mp4a.40.2"').replace(/no/, '')))
    a.src = "/sounds/ping.m4a";
  else
    a.src = "/sounds/ping.mp3";

  a.autoplay = true;
  return;
}

如果你正在處理IE <9

<bgsound src="/sounds/ping.mp3" loop="1" autostart="autostart">

否則測試對QuickTime，RealPlayer和Windows Media的支持
以下代碼是使用Prototype.js編寫的

// this code uses Prototype.js
if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('QuickTime') != -1 }))
  Sound.template = new Template('<object id="sound_#{track}_#{id}" width="0" height="0" type="audio/mpeg" data="#{url}"/>');
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('Windows Media') != -1 }))
  Sound.template = new Template('<object id="sound_#{track}_#{id}" type="application/x-mplayer2" data="#{url}"></object>');
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('RealPlayer') != -1 }))
  Sound.template = new Template('<embed type="audio/x-pn-realaudio-plugin" style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>');

Answer 4

我創建了一個JQuery Sound Plugin，它基於jessegavin上面提到的Thomas Fuchs文章。 您可以在https://github.com/thebentarrow/JQuery-Sound-Plugin找到它

請使用，濫用和貢獻！