不使用Flash嵌入音频mp3

Question

如何在HTML页面中嵌入自定义皮肤的音频MP3，而不使用Flash，同时还应该部分地在旧版浏览器中工作？

- Francesco

Answer 1

你应该看看SoundManager 2。

它如果浏览器支持HTML5，则使用HTML5，否则会降级使用flash。最棒的是，它有一个API在两种情况下都能正常工作。我已经在几个项目中使用过这个工具，感觉非常棒。

以下是他们介绍页面上的描述：

问题：浏览器缺乏良好、一致的本机音频支持。(HTML 5的Audio()是未来的趋势，但仍在开发中。)

解决方案：使用HTML5 Audio() + 头文件Flash通过ExternalInterface的Javascript API，在几乎所有地方都可以正常工作。如果支持HTML5但不支持“非免费”的MP3/MP4格式，则使用Flash作为后备。

SoundManager 2包装和扩展了Flash和HTML音频声音API，向Javascript提供单一、统一的声音API；无论最终使用HTML还是Flash播放声音，API都是相同的。(Flash部分是隐藏的，对开发人员和最终用户都是透明的。)

- jessegavin

---

我必须说这真的很好...我的问题是，我正在为一家大型杂志公司尝试做这件事，我不确定我们是否被允许使用那样的第三方工具...但我会去了解一下的。 - Francesco

好吧，它是开源的，所以您至少可以从中学到东西。您会发现，在跨浏览器环境下，这个问题并不容易解决。 - jessegavin

Answer 2

我创建了一个基于Thomas Fuchs文章的JQuery声音插件，由jessegavin提到。您可以在https://github.com/thebentarrow/JQuery-Sound-Plugin找到它。

请使用、滥用和贡献！

- TheBentArrow

---

+1 嘿，干得好！我能问一下吗：如何设置自动播放、循环、无控件等属性？ - Chuck Le Butt

似乎不起作用。我只收到一个警告？ :( 你有一个能工作的链接吗？ - Chuck Le Butt

Answer 3

如果您想要在旧版浏览器中使用，您需要提供一个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格式。

- rsp

Answer 4

我刚刚发现这篇Thomas Fuchs的文章，它介绍了几种在JavaScript中播放音频而不依赖于Flash回退的方法。

以下是文章的要点：

移动浏览器
目前没有解决方案，除非声音作为用户操作（点击）的直接结果播放。

支持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"/>');

- jessegavin