在没有使用闪存但是使用自定义皮肤的情况下,在html页面中嵌入音频mp3的好方法是什么? 它也应该在旧浏览器中部分工作
答案 0 :(得分:5)
如果浏览器支持HTML5,则使用HTML5,但如果必须,则会降级为使用Flash。最棒的是,它有一个API,无论哪种方式都相同。我在一些项目上使用过这个工具,这太棒了。
的说明问题:浏览器缺乏良好,一致的原生音频支持。 (HTML 5的Audio()是未来,但仍处于开发阶段。)
解决方案:Javascript API使用HTML5 Audio()+无头Flash通过ExternalInterface,几乎无处不在。如果支持HTML5但不支持“非免费”MP3 / MP4格式,则使用flash作为后备。
SoundManager 2包装并扩展了Flash和HTML Audio Sound API,为Javascript提供了单一,统一的声音API; API是相同的,无论HTML还是Flash最终用于播放声音。 (闪存部分是隐藏的,对开发人员和最终用户都是透明的。)
答案 1 :(得分:1)
如果您想在旧浏览器中使用它,那么您必须提供Flash后备。例如,您可以使用jPlayer执行此操作。 jPlayer支持:
请记住,Firefox没有本机MP3支持,所以如果你使用HTML5音频,你还必须为Firefox和其他一些浏览器提供Ogg Vorbis。
答案 2 :(得分:1)
我刚试过这个article from 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&lt; 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"/>');
答案 3 :(得分:1)
我创建了一个JQuery Sound Plugin,它基于jessegavin上面提到的Thomas Fuchs文章。您可以在https://github.com/thebentarrow/JQuery-Sound-Plugin
找到它请使用,滥用和贡献!