在做系统的时候，要求做一个音频播放器，就在网上查找了一些资料，发现这样的资料还是很千篇一律的，EasyUI框架并没有给我们一个音频播放器的功能，在bootstrap上有，但是也是结合html5来写的，因此，我们在这里就用纯的html5血一个音频播放器，如何播放本地的音频。

首先，大家在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.οnlοad=function(){function $(ele){return document.querySelector(ele);}
//=========================================初始化所有数据var audio = $('#audio');var musicMode = 'list';var musicIndex = 1;var bufferTimer = null;var volumeTimer = null;
//===========================================
//小喇叭和调整音量的大小$('.volume').οnmοuseοver=$('.volume_wrap').οnmοuseοver=function(){clearTimeout(volumeTimer);removeClass($('.volume_wrap'),'hidden')};
$('.volume').οnmοuseοut=$('.volume_wrap').οnmοuseοut=function(){volumeTimer = setTimeout(function(){addClass($('.volume_wrap'),'hidden');},300);};
$('.volume_bar').οnclick=function(ev){adjustVolume(this,ev);};
$('.volume').οnclick=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用audio标签做一个最简单的音频播放器相关推荐

使用LM386的简单Arduino音频播放器和放大器
原文地址:https://circuitdigest.com/microcontroller-projects/arduino-audio-music-player 使用LM386的简单Arduino ...
使用MediaCodec+OpenSL编写简单的音频播放器
使用MediaCodec+OpenSL编写简单的音频播放器前言通过MediaCodec Native API 和OpenSL编写一个简单的音频播放器.可以解码并播放一个mp3文件. 流程初始化 ...
web音频播放器_Web设计：如何创建一个时尚的Web音频播放器
我仍然记得在2000年代初,在线播放富媒体(音频和视频)时遇到了很多限制. 很容易就将开始视为理所当然,尤其是自从今天以来,我们有很多商店可以播放音频,例如last.fm或播放视频,例如Youtube ...
android 音乐播放器mv播放功能,Android 音视频学习基础Android最简单的音频播放器| 神农笔记...
/* *最简单的基于FFmpeg的音频播放器 *Simplest FFmpeg Audio Player *本程序实现了音频的解码和播放. * */ #include #include extern ...
最简单的基于FFMPEG+SDL的音频播放器
===================================================== 最简单的基于FFmpeg的音频播放器系列文章列表: <最简单的基于FFMPEG+SDL ...
最简单的基于FFMPEG SDL的音频播放器
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! ==== ...
html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...
openGL ES进阶教程（五）制作一个简单的VR播放器，播放全景视频
之前写过全景(VR)图片,和用openGL ES+MediaPlayer 渲染播放视频+滤镜效果这一篇就在之前的基础上实现一个最简单的VR播放器,播放全景视频. 概述: 全景视频是一种用3D摄像机进 ...
jquery：使用 SoundManager 2 创建简单的网页音频播放器
官网:http://www.schillmania.com/projects/soundmanager2/ HTML5 标准中加入了两个非常强大的标签 audio 和 video ,让我们在网页中嵌入 ...

HTML5用audio标签做一个最简单的音频播放器

testEar.jsp:

style.css文件：

音频播放文件index.js:

HTML5用audio标签做一个最简单的音频播放器相关推荐

最新文章

热门文章