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方法小结
Jul 08 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
如何在vue中使用jointjs过程解析
May 29 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
2006/10/09 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
EJB的角色和三个对象
2015/12/31 面试题
办公室主任岗位职责
2013/11/08 职场文书
日语专业推荐信
2013/11/12 职场文书
幼儿教师国培感言
2014/02/19 职场文书
球队口号
2014/06/18 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
亲属关系公证书样本
2015/01/23 职场文书
开会通知
2015/04/20 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python实现大文本文件分割成多个小文件
2021/04/20 Python
Redis IP地址的绑定的实现
2021/05/08 Redis
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL