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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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开发安全问题的相关总结
2019/03/22 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
js创建数组的简单方法
2016/07/27 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python模块搜索路径代码详解
2018/01/29 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
HTML的form表单和django的form表单
2019/07/25 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
小学生评语大全
2014/04/18 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
初中团委工作总结
2015/08/13 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
如何在C++中调用Python
2021/05/21 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL