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面象对象设计
Apr 28 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
AngularJS中的promise用法分析
May 19 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
vue项目中使用多选框的实例代码
Jul 22 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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的大小写敏感问题整理
2011/12/29 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
vue filters的使用详解
2018/06/11 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
在Python中增加和插入元素的示例
2018/11/01 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python解释器spython使用及原理解析
2019/08/24 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
农民入党思想汇报
2014/01/03 职场文书
简历的自我评价范文
2014/02/04 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
文案策划岗位职责
2015/02/11 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
高中班长竞选稿
2015/11/20 职场文书
优质护理服务心得体会
2016/01/22 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
Go归并排序算法的实现方法
2022/04/06 Golang