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之更有效率的字符串替换
Aug 02 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP小教程之实现链表
2014/06/09 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
React优化子组件render的使用
2019/05/12 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现二分法算法实例
2015/02/02 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Django model class Meta原理解析
2020/11/14 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
JSF如何进行表格处理及取值
2012/08/06 面试题
注册资产评估专业求职信
2014/07/16 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
紧急通知
2015/04/17 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python