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 相关文章推荐
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
js 图片懒加载的实现
Oct 21 Javascript
js不常见操作运算符总结
Nov 20 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php显示页码分页类的封装
2017/06/08 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
php递归函数怎么用才有效
2018/02/24 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
python中from module import * 的一个坑
2014/07/20 Python
Python列表list数组array用法实例解析
2014/10/28 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python模块smtplib学习
2018/05/22 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
一套软件测试笔试题
2014/07/25 面试题
信息管理专业推荐信
2013/10/29 职场文书
自荐信封面
2013/12/04 职场文书
文明倡议书范文
2014/04/15 职场文书
单位未婚证明范本
2014/11/25 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
防卫过当辩护词
2015/05/21 职场文书
工资证明范本
2015/06/12 职场文书