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 相关文章推荐
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jQuery事件详解
Feb 23 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
Vue 构造选项 - 进阶使用说明
Aug 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript验证身份证号
2015/03/03 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
安装python及pycharm的教程图解
2019/10/10 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
教师产假请假条范文
2014/04/10 职场文书
工地安全生产标语
2014/06/06 职场文书
保护环境的标语
2014/06/09 职场文书
写字楼租赁意向书
2014/07/30 职场文书
会计个人实习计划书
2014/08/15 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
关于保护环境的建议书
2019/06/24 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Python实现位图分割的效果
2021/11/20 Python
create-react-app开发常用配置教程
2022/06/25 Javascript