乞丐版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
- 下一篇： 我在工作中总结的一些前端常用小细节 （转