js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器


Posted in Javascript onFebruary 11, 2015

本文实例讲述了js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器。分享给大家供大家参考。具体实现方法如下:

/** 音乐播放器 
* @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); 
     
    } 
  } 
}

用法示例:

var file = []; 
file['mp3'] = '1.mp3'; 
file['ogg'] = '1.ogg'; 
audioplayer('audioplane', file, true); // 播放 
audioplayer('audioplane'); // 停止

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
Javascript 类型转换方法
Oct 24 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 #Javascript
JS实现判断碰撞的方法
Feb 11 #Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 #Javascript
jquery实现动态操作select选中
Feb 11 #Javascript
JS操作HTML自定义属性的方法
Feb 10 #Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 #Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 #Javascript
You might like
php curl基本操作详解
2013/07/23 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python学生管理系统开发
2019/01/30 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python json转字典字符方法实例解析
2020/04/13 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
经理秘书岗位职责
2013/11/14 职场文书
廉政教育心得体会
2014/01/01 职场文书
企业职业病防治方案
2014/05/29 职场文书
中考标语大全
2014/06/05 职场文书
学校班班通实施方案
2014/06/11 职场文书
工程安全生产协议书
2014/11/21 职场文书
给老婆的保证书
2015/01/16 职场文书
湘江北去观后感
2015/06/15 职场文书
张丽莉观后感
2015/06/16 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis