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表格行换色的三种实现方法
Jun 27 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
js获取图片的base64编码并压缩
Dec 05 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调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python 元组(Tuple)操作详解
2014/03/11 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python实现批量修改文件名实例
2015/07/08 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python conda操作方法
2019/09/11 Python
Python Celery多队列配置代码实例
2019/11/22 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
治庸问责工作总结
2015/08/11 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers