IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    unvs发表于 2016-03-20 16:59:24
    love 0

    先将两个简单的兼容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等格式音乐播放器就总结这么多。



沪ICP备19023445号-2号
友情链接