HTML5制作酷炫音频播放器插件图文教程


Posted in HTML / CSS onDecember 30, 2014

HTML5制作酷炫音频播放器插件图文教程

上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有CD和打碟器的制作了,在歌曲播放时CD和打碟器都是具有动画交互效果的,这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~

因为这一期的教程主要是为了展示Html5新增的<audio>标签和audio元素的Dom API的使用,所以播放器UI的绘制在这里就不详细解释了,有疑问的可以自行查看案例的CSS文件的注释或者在下方留言。

主要功能:

一、播放、暂停、上一首、下一首、音量增减

二、点击CD可以打开和关闭播放列表

三、可以拖动本地音乐文件到播放器进行播放

Html结构

复制代码
代码如下:

<div id="myAudio" style="margin:0 auto;">
<audio>
<source title="王若琳 - Wild World.mp3" src="<a href="http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3">http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3</a>" />
<source title="韦礼安 - 还是会.mp3" src="<a href="http://stream18.qqmusic.qq.com/31005070.mp3">http://stream18.qqmusic.qq.com/31005070.mp3</a>" />
<source title="王若琳 - Lost in paradise.mp3" src="<a href="http://stream12.qqmusic.qq.com/30416842.mp3">http://stream12.qqmusic.qq.com/30416842.mp3</a>" />
</audio>
<div class="music_info clearfix">
<div class="cd_holder"><span class="stick"></span><div class="cd"></div></div>
<div class="meta_data">
<span class="title"></span>
<div class="rating">
<div class="starbar">
<ul class="current-rating" data-score="85">
<li class="star5"></li>
<li class="star4"></li>
<li class="star3"></li>
<li class="star2"></li>
<li class="star1"></li>
</ul>
</div>
</div>
<div class="volume_control">
<a class="decrease">a</a>
<span class="base_bar">
<span class="progress_bar"></span>
<a class="slider"></a>
</span>
<a class="increase">b</a>
</div>
</div>
</div>
<ul class="music_list"></ul>
<div class="controls">
<div class="play_controls">
<a class="btn_previous">e</a>
<a class="btn_play">c</a>
<a class="btn_next">d</a>
</div>
<div class="time_line">
<span class="passed_time">0:00</span>
<span class="base_bar">
<span class="progress_bar"></span>
</span>
<span class="total_time">0:00</span>
</div>
</div>
</div>

audio标签

在上面的结构中我们可以发现这个html5新增的audio标签,它具有一个controls属性,顾名思义它是播放器的控制器,controls 属性规定浏览器为音频提供播放控件,例如在chrome浏览器下的audio标签中设置该属性,播放器就会以如下的形式出现,如果不设置该属性,则会是空白一片


复制代码
代码如下:
<audio controls src="xxx.mp3"></audio>

HTML5制作酷炫音频播放器插件图文教程

但由于在不同浏览器下的对audio标签渲染效果不一,这种简易的方法并不适合在跨浏览器下的使用,并且浏览器默认的播放器控件所提供的功能实在是太少了。。所以我们一般通过不设置该属性的方法来隐藏浏览器的默认播放控件,并且手工加入额外的标签和样式来定制播放器的UI界面。

播放控制

在播放器的UI界面绘制完成后,首先我们需要做的是为播放、上一首、下一首这三个主要的控制按钮添加对应的事件监听。

复制代码
代码如下:

var myAudio = $("#myAudio audio")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

复制代码
代码如下:

$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(".btn_next").click(function(){
++currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click(function(){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});

上述的按钮点击的事件监听中,我们通过调用原始的audio元素的play()和pause()方法来控制音频的播放和暂停。另外audio元素提供了currentSrc属性,该属性表示当前播放文件的文件源,我们通过设置该属性来控制当前播放的歌曲曲目。

音量控制

接下来我们来对音量条两边的两个小喇叭添加事件监听,使得通过点击左右两个小喇叭可以减小和增加当前播放的音量。要设置播放器的音量,我们可以调用audio元素中所提供的volume属性。volume值最大为1,最小为0,在这里我们通过每次点击喇叭增减0.1的音量来实现音量的控制。当然你也可以使用别的值。但要注意的是javascript语言不能对小数提供精准的控制,所以每次减少0.1的音量时实际上减少的音量是稍微地大于0.1的,这导致当连续点击9次音量减少的按钮时剩下0.09xxxx的音量,然后你会发现播放器怎么无法静音了。。。当然这个问题是很容易解决的(如下所示),只是稍作提醒。


复制代码
代码如下:

$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume > 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
});

另外我们还需要实现使用滑动器或者点击音量条某一位置来调控音量的功能,有了上面的基础,这个就容易完成了。首先我们来看看点击音量条某一位置来调控音量的功能:点击音量条的某一位置,计算该由音量条的起点到该位置的长度值,再用该值除以总的音量条长度(在这里是100)得到百分比值,再用该百分比值乘以最大音量值1得到所要跳跃到的音量值,再赋值给volume。通过滑动器来调控音量的方法实现也与此类似,主要是要懂得如何计算滑动器在音量条的位置值。在此就不做详细解释,有问题可以下方留言。

复制代码
代码如下:

$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().left; /*滑块初始位置*/
var origX = ev.clientX; /*鼠标初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*计算鼠标移动的距离*/
var curLeft = origLeft + moveX; /*用鼠标移动的距离表示滑块的移动距离*/
(curLeft < -7) && (curLeft = -7);
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
});
});

时间控制

好了,现在播放器已经基本能用了,但我们还希望能够直接跳过音频的一部分到特定的时间点。那么要怎么实现呢??!制定标准的委员们也不是傻子,这种常用的功能是不会有所疏漏的拉~所以赶紧翻翻API吧,你会发现audio元素提供了一个名为currentTime的属性,非常简明易懂的名称(其实大多属性都是很好理解的),设置该属性可以设置当前播放的时间点。

在这里,我们还需要使用audio的另一个属性duration,该属性指的是当前播放文件的总时间长度。因此根据音量控制的实现,我们可以这样做:

一、点击进度条的某一位置,计算该由进度条的起点到该位置的长度占总进度条长度的百分比值(例如点击进度条的正中间位置,则进度条的起点到该位置的长度占总进度条长度的50%),记为percentage。

二、然后用percentage乘以文件的总时间长度duration就得到了你想要跳跃到的时间点的值,再把该值赋给currentTime即完成了所要实现的功能。


复制代码
代码如下:

$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
});

到这里,播放器已经基本成型了。剩下一些无关痛痒(其实对我来说才是最重要的哈哈)的UI交互实现,如果大家有兴趣的话就到源码中查看吧,有问题可以在下方评论留言,希望能多多交流和学习。

HTML / CSS 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 #HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 #HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 #HTML / CSS
You might like
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP数据库开发知多少
2006/10/09 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
npm qs模块使用详解
2020/02/07 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python正则表达式指南 推荐
2018/10/09 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
使用python实现多维数据降维操作
2020/02/24 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
学习之星事迹材料
2014/05/17 职场文书
诉讼授权委托书
2014/10/15 职场文书
2014年维稳工作总结
2014/11/18 职场文书
毕业生评语大全
2015/01/04 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
创业计划书之农家乐
2019/10/09 职场文书
警用民用对讲机找不同
2022/02/18 无线电
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA