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与cookie 的问题详解
Nov 11 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
angular.bind使用心得
Oct 26 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
JS实现的tab页切换效果完整示例
Dec 18 Javascript
vue实现图片上传到后台
Jun 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
js实现表格字段排序
2014/02/19 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
python二叉树的实现实例
2013/11/21 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Django框架多表查询实例分析
2018/07/04 Python
Python中的Django基本命令实例详解
2018/07/15 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python3 线性回归验证方法
2019/07/09 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python实现控制台输出颜色
2021/03/02 Python
.NET方向面试题
2014/11/20 面试题
公司周年庆典邀请函
2014/01/12 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
中国好声音华少广告词
2014/03/17 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang