乞丐版HTML5播放器
生活随笔
收集整理的这篇文章主要介绍了
乞丐版HTML5播放器
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
前不久新学的html5中的audio，写了一个简单功能的音乐播放器，如不足之处，还请大神们指点一二。
<!DOCTYPE html> <html> <head><title>音乐播放器</title><meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /><link rel="stylesheet" href="css/style.css" /><script src="js/jquery-1.8.2.min.js"></script><script src="js/jquery.mobile-1.2.0.js"></script><style>.singname{float:left;width:20%;height:30px;font:12px;}</style><script>$(function() {//播放器样式设置playwidth = $(window).width();outerwidth = playwidth * 0.9;$("#outer").css('width', outerwidth);$("#rate").css('width', outerwidth * 0.6);$("#ratetime").css('width', outerwidth * 0.1);//设置内容区域的高度，确保播放区域位于页面靠下位置$("#content").css('height', $(window).height() * 0.75);//获取audio元素var audio = $("#audios");//进度条function setI() {var total = audio.duration; //获取总时长var now = audio.currentTime; //当前时间// 播放进度随时显示var progress = now / total;var width = progress * ($("#rate").width());$("#ratemidtop").css('width', parseInt(width));// 播放时间的提示更新var totalTime = (total / 60).toFixed(2); //保留2位小数var nowTime = (now / 60).toFixed(2);$("#ratetime").text(nowTime + '/' + totalTime);}//播放操作$('#content a').click(function() {var self = $(this);var text = self.text(); //获取文字是播放还是停止if (text == "播放") {// 选中哪首音乐哪首音乐开始播放audio.src = self.attr('href');audio.play();// 文字变成“停止”$("#content a").text("播放");self.text('停止');// 音乐播放器按钮图标变成“暂停”图标,设置播放状态背景图片位置为（-70px -25px）$("#playp").css('background-position', '-70px -25px');//雪碧图(sprite)setInterval(setI, 1000);//前进$("#next").click(function() {audio.currentTime += 3;});//后退$("#prv").click(function() {audio.currentTime -= 3;});//播放/暂停 $('#playp').click(function() {if (audio.paused) {audio.play();$('#playp').css('background-position', '-70px -25px');setInterval(setI, 1000);self.text('停止');} else {audio.pause();$('#playp').css('background-position', '-50px -25px');self.text('播放');}});} else { //停止时// 链接文字是“停止”，单击时,链接文字变成“播放”self.text("播放");// 视频停止播放audio.pause();// 进度条停止更新clearInterval(setInterval(setI, 1000));// 音乐播放器按钮图标变成“播放”图标,设置播放状态背景图片位置为（-50px -25px）$("#playp").css('background-position', '-50px -25px');}return false;});// 音量设置$('#volume').click(function() {if (audio.muted) { //关闭静音audio.muted = false;$('#volume').css('background-position','-90px -45px');} else { //开启静音audio.muted = true;$('#volume').css('background-position','-90px -20px');}});});</script></head><body><div data-role="page"><div data-role="header" data-position="fullscreen"><div data-role="navbar"><ul><li><a href="#" class="ui-btn-active">在线音乐</a></li><li><a href="#">本地音乐</a></li></ul></div></div><!-- /header --><div data-role="content" id="content"><div><div class="singname">千千阙歌</div><div class="sing"><a href='music/02.mp3' id='play'>播放</a></div></div><div><div class="singname">思念人之屋</div><div class="sing"><a href='music/01.mp3' id='play'>播放</a></div></div></div><!-- /content --><div data-role="footer" class="ui-bar"><audio src="music/02.mp3" id='audios'></audio><!-- 播放器外边框 --><div id="outer"><!-- 播放器控制区域: 上一首 下一首 播放 暂停 --><div id="control"><div id="prv"> </div><div id="playp" class='ply'></div><div id="next"> </div></div><!-- 播放器控制区域结束 --><!-- 播放进度--><div id="rate"><div id="ratetop"></div><div id="ratemid"></div><div id="ratemidtop"> </div><div id="ratebom"></div></div><!-- 播放进度结束--><div id="ratetime"></div><!-- 音量--><div id="volume"></div><!-- 音量结束--></div><!-- 播放器外边框结束 --></div></div><!-- /page --> </body></html>总结
以上是生活随笔为你收集整理的乞丐版HTML5播放器的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 【ThinkPHP系列篇】Thinkph
- 下一篇： 我在工作中总结的一些前端常用小细节 （转