HTML5用audio标签做一个最简单的音频播放器
2015-10-27 21:30
696 查看
在做系统的时候，要求做一个音频播放器，就在网上查找了一些资料，发现这样的资料还是很千篇一律的，EasyUI框架并没有给我们一个音频播放器的功能，在bootstrap上有，但是也是结合html5来写的，因此，我们在这里就用纯的html5血一个音频播放器，如何播放本地的音频。
首先，大家在myeclipse上建立一个自己的web项目：
其实，这里的代码都不难，主要的问题出在，自己没有弄明白jsp界面上引用的js和css的文件目录，我将我们用到的音频文件放在了avatar文件下面，因为这里用到的“http://file.dengo.org/music/cyx_ds.mp3”，一直播放不了，因此我就用本地的音频试试，就还好， 基本代码：
list.js文件：
这里写我们音频文件的地址。
将这些文件放入到对应的文件家中，最简单的音频播放器就做好了。
我们的运行图：
仅仅是最一个英语测试的音频文件，Demo的下载
也有按照网上的播放器中的一个比较高级一点的：
这个Demo下载的源码：Demo下载
首先，大家在myeclipse上建立一个自己的web项目：
其实，这里的代码都不难，主要的问题出在，自己没有弄明白jsp界面上引用的js和css的文件目录，我将我们用到的音频文件放在了avatar文件下面，因为这里用到的“http://file.dengo.org/music/cyx_ds.mp3”，一直播放不了，因此我就用本地的音频试试，就还好， 基本代码：
testEar.jsp:
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>最简单的音频播放器</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="/TestEar/testEar/css/style.css"> </head> <body> <div class="music_wrap"> <div class="control"> <div class="option"> <div class="time">-00:00</div> <div class="volume" title="音量"> <p></p> </div> <div class="volume_wrap hidden"> <div class="volume_bar"> <div class="volume_now"></div> </div> </div> </div> <div class="progress_bar" id="bar"> <div class="progress"></div> <div class="buffer"></div> </div> <div class="action_button"> <div class="prev" title="上一首"></div> <div class="play" title="播放" id="play"></div> <div class="pause hidden" title="暂停"></div> <div class="next" title="下一首"></div> </div> </div> <audio id="audio"> <p>您的浏览器不支持HTML5播放器呢！赶紧换一个最新的呗^_^.</p> </audio> </div> <script type="text/javascript" src="/TestEar/testEar/js/list.js"></script> <script type="text/javascript" src="/TestEar/testEar/js/index.js"></script> </body> </html> </span>
style.css文件：
<span style="font-size:18px;">@charset "UTF-8";
/*
* @author qmx
* @email
* @link
* @project HTML5_Player
* @description
*/
/* ----- reset ----- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
button, input, select, textarea {font-size: 100%;}
body,button,input,select,textarea{font: 12px/1.5 'Microsoft YaHei',Arial,"\5b8b\4f53",Tahoma,sans-serif;}
a,a:link,a:visited,a:focus,a:hover,a:active{text-decoration:none;}
fieldset,img{border:0}
ol,ul{list-style:none}
address,caption,cite,code,dfn,em,th,var{font-style:normal; font-weight:normal}
caption,th{text-align:left}
abbr,acronym{border:0}
table {border-collapse:collapse; border-spacing:0;}/* tables still need 'cellspacing="0"' in the markup */
img{ -ms-interpolation-mode:bicubic; }/*for ie7*/
:focus {outline-color: -moz-use-text-color;outline-style: none;outline-width: 0;}
/* ----- reset end ------ */
/* ----- css ----- */
@font-face {
font-family: 'icon';
src:url('../fonts/icon.eot?');
src:url('../fonts/icon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icon.woff?') format('woff'),
url('../fonts/icon.ttf?') format('truetype'),
url('../fonts/icon.svg?#icon') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #F2F2F0;
}
.music_wrap{
width: 355px;
height: 50px;
margin: 50px auto;
box-shadow: 0px 0px 20px #D8D8D8;
border-radius: 10px;
}
.control{
height: 160px;
margin-top: 10px;
position: relative;
}
/*播放模式*/
.option{
height: 22px;
font-size: 13px;
color: #A1A1A1;
}
.time{
float: left;
margin-left: 16px;
line-height: 22px;
}
.volume{
color: #A0A0A0;
font-family: 'icon';
font-size: 16px;
float: right;
margin-right: 10px;
cursor: pointer;
}
.list{
font-size: 20px;
line-height: 24px;
color: #4BA3DC;
}
/*音量调节*/
.volume{
margin-right: 16px;
color: #4BA3DC;
}
.volume_wrap{
width: 15px;
height: 90px;
position: absolute;
right: 18px;
top: -90px;
z-index: 99;
cursor: pointer;
border-radius: 9px;
background-color: #fff;
box-shadow: 0 0 10px #D9D9D9;
}
.volume_bar{
width: 9px;
height: 80px;
background-color: #D5D5D5;
position: absolute;
border-radius: 9px;
left: 3px;
top: 5px;
}
.volume_now{
width: 9px;
height: 64px;
background-color: #4BA3DC;
position: absolute;
bottom: 0;
border-radius: 9px;
}
/*播放进度条*/
.progress_bar{
width: 324px;
height: 10px;
background-color: #E5E5E3;
border-radius: 5px;
margin: 3px auto 0;
position: relative;
cursor: pointer;
}
.progress{
width: 0px;
height: 10px;
background-color: #4BA3DC;
border-radius: 5px;
position: absolute;
z-index: 11;
}
.buffer{
width: 0px;
height: 10px;
background-color: #D5D5D5;
border-radius: 5px;
position: absolute;
z-index: 1;
}
.hidden{
display: none;
}
</span>list.js文件：
<span style="font-size:18px;">/*
* @author qmx
* @email i@dengo.org
* @link
* @project playList
* @description 保存歌曲信息
*/
var playList = [
{
'musicURL' : '/TestEar/testEar/avatar/1.mp3',
}
];
</span>这里写我们音频文件的地址。
音频播放文件index.js:
<span style="font-size:18px;">/*
* @author qmx
* @email
* @link
* @project HTML5_Player
* @description 播放js
*/
window.onload=function(){
function $(ele){
return document.querySelector(ele);
}
//=========================================初始化所有数据
var audio = $('#audio');
var musicMode = 'list';
var musicIndex = 1;
var bufferTimer = null;
var volumeTimer = null;
//===========================================
//小喇叭和调整音量的大小
$('.volume').onmouseover=$('.volume_wrap').onmouseover=function(){
clearTimeout(volumeTimer);
removeClass($('.volume_wrap'),'hidden')
};
$('.volume').onmouseout=$('.volume_wrap').onmouseout=function(){
volumeTimer = setTimeout(function(){
addClass($('.volume_wrap'),'hidden');
},300);
};
$('.volume_bar').onclick=function(ev){
adjustVolume(this,ev);
};
$('.volume').onclick=function(){
if (audio.muted == false) {
this.style.color = '#A1A1A1';
audio.muted = true;
}
else if (audio.muted == true) {
this.style.color = '#E74D3C';
audio.muted = false;
};
};
//==============================================初始化的时候，音频文件
initPlayer(musicIndex-1);
audio.volume = 0.8;
audio.addEventListener('canplay',bufferBar,false);
function initPlayer(index){
//播放器的播放文件索引号
audio.setAttribute('src',playList[index].musicURL);
$('.progress').style.width = 0 +'px';
//进度条初始化
audio.removeEventListener('canplay',bufferBar,false);
clearInterval(bufferTimer);
$('.buffer').style.width = 0 +'px';
// toPlay('play');
audio.play();
//隐藏所有按钮
addClass($('.prev'),'hidden');
addClass($('.play'),'hidden');
addClass($('.next'),'hidden');
addClass($('.pause'),'hidden');
}
//=============================================更新时间
audio.addEventListener('timeupdate',function(){
if (!isNaN(audio.duration)) {
var surplus = audio.duration-audio.currentTime;
var surplusMin = parseInt(surplus/60);
var surplusSecond = parseInt(surplus%60);
if (surplusSecond < 10 ) {
surplusSecond = '0'+surplusSecond;
};
$('.time').innerHTML = "-" + surplusMin + ":" +surplusSecond;
//进度条的进行总时间
var progressValue = audio.currentTime/audio.duration*324;
$('.progress').style.width = parseInt(progressValue) + 'px';
};
},false);
//==============================================进度条
function bufferBar(){
bufferTimer = setInterval(function(){
var bufferIndex = audio.buffered.length;
if (bufferIndex > 0 && audio.buffered != undefined) {
var bufferValue = audio.buffered.end(bufferIndex-1)/audio.duration*324;
$('.buffer').style.width = parseInt(bufferValue)+'px';
if (Math.abs(audio.duration - audio.buffered.end(bufferIndex-1)) <1) {
$('.buffer').style.width = 324+'px';
clearInterval(bufferTimer);
};
};
},1000);
}
//===============================================调整音量
function adjustVolume(dom,ev){
var event = window.event || ev;
var volumeY = dom.getBoundingClientRect().bottom - event.clientY;
audio.volume = (volumeY/80).toFixed(2);
$('.volume_now').style.height = volumeY + 'px';
};
//=============================================
function hasClass(dom,className){
var classNum = dom.className.split(" "),
hasClass;
for (var i = 0; i < classNum.length; i++) {
if (classNum[i] == className) {
hasClass = true;
break;
}
else{
hasClass = false;
};
};
return hasClass;
}
function addClass(dom,className){
if (!hasClass(dom,className)) {
dom.className += " " + className;
};
}
function removeClass(dom,className){
if (hasClass(dom,className)) {
var classNum = dom.className.split(" ");
for (var i = 0; i < classNum.length; i++) {
if (classNum[i] == className) {
classNum.splice(i,1);
dom.className = classNum.join(" ");
break;
};
};
};
}
function replaceClass(dom,className,replaceClass){
if (hasClass(dom,className)) {
var classNum = dom.className.split(" ");
for (var i = 0; i < classNum.length; i++) {
if (classNum[i] == className) {
classNum.splice(i,1,replaceClass);
dom.className = className.join(" ");
break;
};
};
};
}
}
</span>将这些文件放入到对应的文件家中，最简单的音频播放器就做好了。
我们的运行图：
仅仅是最一个英语测试的音频文件，Demo的下载
也有按照网上的播放器中的一个比较高级一点的：
这个Demo下载的源码：Demo下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- 实现音乐播放器的代码（html5+css3+jquery）
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- MVC中基于Ajax和HTML5实现文件上传功能
- jquery+html5烂漫爱心表白动画代码分享
- spring+html5实现安全传输随机数字密码键盘
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码