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中string转date示例代码
Nov 01 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
javascript相关事件的几个概念
May 21 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php print EOF实现方法
2009/05/21 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
让 python 命令行也可以自动补全
2014/11/30 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python多线程抽象编程模型详解
2019/03/20 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python 进程池pool使用详解
2020/10/15 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
数学教育专业求职信
2014/07/22 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Elasticsearch 索引操作和增删改查
2022/04/19 Python