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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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 json转换成数组形式代码分享
2014/11/10 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
js charAt的使用示例
2014/02/18 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
物流专业自荐信
2014/05/23 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python