转自:http://www.2cto.com/kf/201203/124944.html
关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待。本文为该系列(HTML5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注。
html5里有一个新标签audio,该标签用以定义声音,比如音乐或其他音频流。
既然audio标签可以播放音频,那我们可以不再使用flash、wmp等其他任何第三方组件,轻而易举的使用纯html来打造一个音乐播放器。
例子:
<audio src="someaudio.MP3"></audio>
或
<audio >
<source src="someaudio.MP3"/>
</audio>
下面是小弟用audio做的一个音乐播放器的界面,先睹为快:
audio 有几个属性:
src:String型,所播放音频的 url。
autoplay:bool型,如果是 true,则音频在就绪后马上播放。默认为false。
controls:bool型,如果是 true,则向用户显示控件,比如播放按钮。默认为false。
更多详细属性:http://www.w3school.com.cn/html5/html5_audio.asp
audio 有几个事件:
onended:当媒介已抵达结尾时运行脚本,也就是当前歌曲播放完了,这里的“媒介”是指audio标签。
onloadstart:当浏览器开始加载媒介数据时运行脚本。
onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
onplaying:当媒介数据已开始播放时运行脚本。
onpause:当媒介数据暂停时运行脚本。
onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)
更多详细事件:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#Media_Events
打造该播放器的完整代码如下:
HTML
<!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">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
body
{ font-size:13px;
font-family:宋体;
}
#ul_musicList
{
width:300px;
list-style-type:none;
margin:5px 0 3px 0;
padding:0px;
}
#ul_musicList li
{
padding:5px;
border:solid 1px #EEEEEE;
}
</style>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/MusicBox.js" type="text/javascript"></script>
<script type="text/javascript">
var mb=null;
$().ready(function(){
mb=new MusicBox();
mb.init();
});
</script>
</head>
<body >
<div>
<audio id="musicBox" controls="true"
onended="mb.nextMusic()"
onloadstart="mb.loadStart()"
onplaying="mb.playing()"
onpause="mb.pausePaly()"
onerror="mb.loadError()"
>
</audio>
<br /> <input id="btnNext" type="button" value="下一首" onclick="javascript:mb.nextMusic()" />
<span id="sn_status"></span><br />
<div style=" margin-top:5px">歌曲列表:</div>
<ul id="ul_musicList" >
</ul>
<div style="width:300px; text-align:right">
播放模式:<select id="slt_playMode">
<option value="1">全部循环</option>
<option value="2">单曲循环</option>
</select>
</div>
</div>
</body>
MusicBox.js
MusicBox=function (){
var _this=this;
var media= document.getElementById("musicBox");
var musicFiles=[
{name:"犯错",url:"http://www.yandui.com/upload/sound/2009-9-20/20_34_25_953_.mp3"} ,
{name:"天使的翅膀",url:"http://www.masradio.com.cn/uploadfile/program/uploadfile/200805/20080522090800196.mp3"},
{name:"无名轻音乐",url:"http://audio.ngfiles.com/88000/88260_Zanarkan_Mastered_Piano_Ve.mp3"},
{name:"草马之歌",url:"http://www.cnblogs.com"},//错误的资源
{name:"相思风雨中",url:"http://www.czopen.com/club/forum/files/247.mp3"}
];
//当前正在播放的歌曲的索引
var index=-1;
//当前正在播放的歌曲
var playingFile=null;
//播放模式
var playMode=1;
//下一首
this.nextMusic=function(){
if(playMode=="1"){
index+=1;
}
if(index==musicFiles.length){
index=0;
}
playingFile=musicFiles[index];
media.setAttribute("src",playingFile.url);
media.play();
$("#ul_musicList").children().css({"background-color":"#FFF","border":"solid 1px #EEEEEE","color":"#000"});
$( $("#ul_musicList").children()[index]).css({"background-color":"#2C7DE2","border":"solid 1px #206DDF","color":"#FFF"});
}
//加载
this. loadStart=function(){
$("#sn_status").text("加载中....");
}
//播放
this. playing=function(){
$("#sn_status").text("当前正在播放:"+playingFile.name);
}
//暂停
this. pausePaly=function(){
$("#sn_status").text("暂停:"+playingFile.name);
}
//加载出错
this. loadError=function(){
$("#sn_status").text("加载“"+playingFile.name+"”失败,可能资源不存在~");
}
//初始化
this.init=function(){
for(var a in musicFiles){
$("#ul_musicList").append("<li>"+musicFiles[a].name+"</li>");
}
_this.nextMusic();
$("#slt_playMode").change(function(){
playMode=$("#slt_playMode").val();
});
}
}
如果您能在下面看到播放器并听到背景音乐,那说明您当前使用的浏览器支持HTML5 。
示例源码下载(建议使用 Google Chrome测试)http://www.2cto.com/uploadfile/2012/0327/20120327094903323.rar
分享到:
相关推荐
HTML5 运用aduio标签打造音乐播放器 可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。 <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto...
Android C++高级编程:使用NDK_Onur Cinar, 于红PDF电子书下载 带书签目录 完整版 原书名:Pro Android C++ with the NDK 原出版社: Apress 作者: (美)Onur Cinar 译者: 于红 佘建伟 冯艳红 丛书名: 移动开发...
aduio通过摄像头模块获取视频信息,然后传输到电脑客户端进行数据分析检测。
linux下的MPEG1,MPEG2的软件或硬件解码,缺点是系统资源消耗较大
这是一组语音识别系统设计代码 很不错的哟。值得下载。
gupnp is a lib for development digital media controller as a part of DLNA
Universal Serial Bus Device Class Definition for Audio Devices release 2.0
本项目的目的是教你如何实现一个简单的音乐播放器(这并不难) 本项目并不是一个可以用于生产环境的element播放器,所以并没有考虑太多的兼容性问题 本项目不是ElementUI的一个音频插件,只是一个教程,不过你可以...
音乐播放器或录音机支持音频格式,例如MP3,AAC,FLAC,WAV,OGG,OPUS,AMR,TS,EQ,Downmixer,Sonic,ALC,G.711 ... 从以下来源播放音乐:HTTP,HLS(HTTP实时流),SPIFFS,SDCARD,A2DP来源,A2DP接收器,...
使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在....
基于STM32103+wm8978+mp3格式的软件解码+WAV文件解析的音频播放 站长你就让我过了吧:)
linux/android 实现uac + cdc串口的复合设备驱动,此驱动基于legacy,即开机无需配置脚本...也可改为使用脚本方式,不编译legacy下的驱动即可,配置usb脚本中功能为acm,uac1.本驱动是基于rk平台实现,理论全平台适用。
超酷AUDIO播放软件是由三陀工作室开发的,是一个高质量的AUDIO播放软件,占用CPU资源非小功能强大,操作简单,支持歌词秀、SKIN、Plugins(支持播放格式插件和工具插件),还留有接口,外接程序可以完全控制播放器,...
Core_v5.2.pdf,最新蓝牙协议规范,BLE audio, ISO,AOA/AOD相关规范;如果你想学习最新的蓝牙协议规范,可以下载该文档,包含定位,le aduio等规范,
aduio amp 2.6W, SI-EN 3-W Mono Filterless Class-D Audio Power Amplifier
可以支持多文件预览,包括pdf,txt,exel,word,ppt,aduio,chm等
本文简单介绍了声卡的工作原理,录音的原理以及数字音频的基本知识并且利用Windows提供的Waveform Aduio APIs以及Multimedia File I/O APIs实现一个Windows环境下的麦克风录音以及将录音文件保存成.wav文件的简单系统...
IEC61937_2做音频必需的标准协议 Digital audio – Interface for non-linear PCM encoded audio bitstreams applying IEC 60958 – Part 2: Burst-info
Mediastreamer2 is a powerful and lightweight streaming engine for voice/video telephony applications. This media processing and streaming toolkit is responsible for receiving and sending all ...