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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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面向对象学习之parent::关键字
2017/01/18 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Javascript缓存API
2016/06/14 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python中partial()基础用法说明
2018/12/30 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Python页面加载的等待方式总结
2021/02/28 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
介绍一下write命令
2012/09/24 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
护士毕业自我鉴定
2014/02/07 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android