注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@从前有个T

weibo.com/sysutt

 
 
 

日志

 
 
 
 

一个非常简单的html5自定义音频播放器  

2013-12-16 17:41:28|  分类: 网络相关 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
展示效果(不支持IE早期版本):http://om.nfdaily.cn/nfstory/

前段时间要针对移动终端做一个音频播放列表,以频道的形式嵌入到微信公众账号里面,提供给用户播放音频。

设计不是什么难事,看了一些运营得比较好的微信公众账号,分析了主要功能以后,半天不到的功夫就做了一个效果图:
一个非常简单的html5自定义音频播放器 - 瘦猴子 - @从前有个T


接下来的工作就是要把页面给做出来。 等到写代码的时候才发现,如果使用现成的音频播放器框架,代码庞大不算,还得花时间修改样式,而且这个页面本身只是针对移动设备的,对于桌面浏览器无需做兼容,很多现成框架里面的浏览器兼容代码都可以忽略。

于是决定研究html5的官方文档,直接用html5的原生接口来做一个自定义音频播放器。

html部分并不复杂:
<li>
     <h2>这里是标题</h2>
        <div class="scrubber"><div class="progress"></div><div class="loaded"></div></div>
        <div class="play-pause">
         <div class="play"></div>
                <div class="pause"></div>
        </div>
        <audio src="sound.mp3" preload="metadata" />
</li>

首先插入一个audio标签。
<audio src="sound.mp3" preload="metadata" />
由于是在移动端浏览,设定preload="metadata",只需要加载音频元数据就行了,不要整个文件预加载。
然后加上音频控制元素:
class为scrubber的div是播放器的进度条,progress为播放进度,loaded为加载进度。
play-pause是播放/暂停控制的div。
这样html的部分就完成了。

然后定义它的css样式
.play,.pause{position:absolute; left:0; top:0; width:100%;height:100%; background: url(../images/audio_play.png) right center no-repeat}
.pause{background: url(../images/audio_pause.png) right center no-repeat; display:none}
.scrubber {position:absolute; bottom:0; height:6px; width:100%; left:0; margin:0; background:#cecece; border:0; display:none}
.progress{background:#4878b0; width:0; height:6px; position:absolute; left:0; bottom:0; z-index:2}
.loaded{background:#abc1db; width:0; height:6px; position:absolute; left:0; bottom:0; z-index:1}
.play-pause{width:100%; height:100%; position:absolute; top:0; left:0}
.playing .scrubber {display:block}
.playing {background:url(../images/alpha_black20.png)}


也比较简单,无非就是定义一些颜色和位置什么的。

最后,就是最关键是js部分了,为了偷懒,我用了jquery框架:
$(document).ready(function(){
//点播放键开始执行function
$('.play').click(function(){
//如果已经有音频在播放了,就暂停它
if($(".playing").length > 0){
$('.playing').parent().find('audio')[0].pause();
$('.playing .pause').hide();
$('.scrubber').hide();
$('.playing .play').show();
$('.play-pause').removeClass('playing');
}
//找到播放按钮所在的音频元素
var audio = $(this).parent().parent().find('audio')[0];
//把播放按钮隐藏
$(this).hide();
//显示暂停按钮,同时给父元素加上一个表示正在播放的class
$(this).parent('.play-pause').addClass('playing');
$(this).next('.pause').show();
//开始播放音频
audio.play();
//控制显示播放进度和加载进度
var time = timefomat(audio.duration);
$(audio).bind("timeupdate", function(){
var c_time = timefomat(audio.currentTime);
var z = audio.buffered.end(audio.buffered.length-1);
$('.playing').prev('.scrubber').children('.loaded').css('width',z/audio.duration*100+'%');
$('.playing').prev('.scrubber').children('.progress').css('width',audio.currentTime/audio.duration*100+'%');
});
$(this).parent().parent().children('.scrubber').show();
});
//点击暂停按钮后执行的操作
$('.pause').click(function(){
var audio = $(this).parent().parent().find('audio')[0];
$(this).hide();
$(this).parent('.play-pause').removeClass('playing');
$(this).prev('.play').show();
audio.pause();
$('.scrubber').hide();
});
//一段简单的时间转换js
function timefomat(time){if (time != null && time != ""){if (time < 60) {var s = Math.round(time);if(s<10){s = '0'+s;}time = '00:'+s;} else if (time > 60 && time < 3600) {var m = parseInt(time/60);var s = parseInt(time % 60);if(m<10){m='0'+m;};if(s<10){s='0'+s;};time = m + ":" + s;} else if (time >= 3600 && time < 86400){
var h = parseInt(time/3600);
var m = parseInt(time % 3600 / 60);var s = parseInt(time % 3600 % 60 % 60);if(h<10){h='0'+m;};if(m<10){m='0'+m;};if(s<10){s='0'+s;};time = h + ":" + m + ":" + s;}return time;}}
});
这样,一个简单的html5自定义音频播放器就完成了。
  评论这张
 
阅读(611)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018