在不使用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找到它

请使用，滥用和贡献！