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 全等号运算符使用说明
May 31 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue增加强缓存和版本号的实现方法
May 01 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 csv操作类代码
2009/12/14 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python统计字符的个数代码实例
2020/02/07 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Django自带的用户验证系统实现
2020/12/18 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
理想点亮人生演讲稿
2014/05/21 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
毕业论文致谢词
2015/05/14 职场文书
晚会开场白和结束语
2015/05/29 职场文书
行政处罚听证告知书
2015/07/01 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL