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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
javascript引用对象的方法
2007/01/11 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Javascript实现字数统计
2015/07/03 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
AngularJs每天学习之总体介绍
2017/08/07 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python实现2048小游戏
2015/03/30 Python
Python解决八皇后问题示例
2018/04/22 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python中的插入排序的简单用法
2021/01/19 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
大一期末自我鉴定
2013/12/13 职场文书
上班迟到检讨书
2014/01/10 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers