js实现网页mp3等格式音乐播放器兼容IE、FireFox、Chrome、Opera

作者: unvs 分类: Web前端 发布时间: 2016-03-21 00:59 ė12,855 views 6没有评论

先将两个简单的兼容IE、chrome的播放mp3等格式播放器。
IE、Firefox浏览器:
<object data=”music.mp3″ type=”application/x-mplayer2″ width=”0″ height=”0″>
<param name=”src” value=”music.mp3″>
<param name=”autostart” value=”1″>
<param name=”playcount” value=”infinite”>
</object>

Chrome其他浏览器:
<embed id=”Player” name=”Player” src=”music.mp3″ width=200 height=100 type=audio/mpeg autostart=true loop=true>

后面实例讲下利用js实现可兼容IE、FireFox、Chrome、Opera等浏览器的音乐播放器,支持mp3、wma等格式。
实现方法如下:

<script type="text/javascript">
/** 音乐播放器
* @param obj 播放器id
* @param file 音频文件 mp3: ogg:
* @param loop 是否循环
*/
function audioplayer(id, file, loop){ 
  var audioplayer = document.getElementById(id); 
  if(audioplayer!=null){ 
    document.body.removeChild(audioplayer); 
  } 

  if(typeof(file)!='undefined'){ 
    if(navigator.userAgent.indexOf("MSIE")>0){// IE 

    var player = document.createElement('bgsound'); 
    player.id = id; 
    player.src = file['mp3']; 
    player.setAttribute('autostart', 'true'); 
    if(loop){ 
      player.setAttribute('loop', 'infinite'); 
    } 
    document.body.appendChild(player); 

    }else{ // Other FF Chome Safari Opera 

    var player = document.createElement('audio'); 
    player.id = id; 
    player.setAttribute('autoplay','autoplay'); 
    if(loop){ 
      player.setAttribute('loop','loop'); 
    } 
    document.body.appendChild(player); 

    var mp3 = document.createElement('source'); 
    mp3.src = file['mp3']; 
    mp3.type= 'audio/mpeg'; 
    player.appendChild(mp3); 

    var ogg = document.createElement('source'); 
    ogg.src = file['ogg']; 
    ogg.type= 'audio/ogg'; 
    player.appendChild(ogg); 

    } 
  } 
} 
/*js调用音乐播放器代码*/
var file = []; 
file['mp3'] = 'music.mp3'; 
file['ogg'] = 'music.ogg'; //此格式为兼容IE外部分浏览器
audioplayer('audioplane', file, true); // 播放(true为是否循环播放)
audioplayer('audioplane'); // 停止
</script>

演示地址:点击进入

好了,js实现网页mp3等格式音乐播放器就总结这么多。

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:js实现网页mp3等格式音乐播放器兼容IE、FireFox、Chrome、Opera

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部