js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

2024-10-21 14:35:44

本文实例讲述了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程序设计有所帮助。

比较炫的图片播放器 js 焦点效果代码

图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a
js实现的万能flv网页播放器代码

本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20
javascript实现简单的html5视频播放器

效果: 代码很简单 js define("html5_video_player", [ '../avalon-min'], function(avalon) { function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds % 60); minutes = (minutes >
js的flv视频播放器插件使用方法

使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧. <div class="txt1"> <script type="text/javascript"> var swf_width=307 var swf_height=182 var texts='快乐星汉堡' var files='http://v.78.cn/kuailexing/sp.flv' </script> <!--<scri
JavaScript实现带播放列表的音乐播放器实例分享

代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
JS HTML5 音乐天气播放器(Ajax获取天气信息)

晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条
javascript 播放器控制

详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link href="style/style.css&quo
运用js教你轻松制作html音乐播放器

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc
(jsp/html)网页上嵌入播放器(常用播放器代码整理)

这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA
原生JS实现小小的音乐播放器

前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到

js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

相关推荐

随机推荐