前端切图:自制简易音乐播放器
生活随笔
收集整理的這篇文章主要介紹了
前端切图:自制简易音乐播放器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
音樂播放器是一個(gè)非常常見的應(yīng)用，這篇博客就是介紹如何制作一個(gè)簡單的音樂播放器，這款音樂播放器具有以下的功能：圖片旋轉(zhuǎn)功能，點(diǎn)擊播放，點(diǎn)擊暫停播放的功能，音量調(diào)大調(diào)小功能，設(shè)置音頻的播放時(shí)間，循環(huán)播放，自動(dòng)播放，切換歌曲功能。
效果如下：
圖片發(fā)自簡書App
代碼如下：
<!DOCTYPEhtml> <html><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;border:0;}@keyframesimg{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.img{background:url(004.jpg)no-repeat;width:200px;height:200px;background-size:100%100%;border:1pxsolid#d1d1d1;border-radius:50%;animation:img3sinfinitelinearpaused;}.img.runing{animation-play-state:running;}li{height:50px;line-height:50px;text-indent:10px;}li+li{border-top:1pxsolidred;}.volume{display:inline-block;width:40px;height:40px;border:1pxsolid#d1d1d1;text-align:center;line-height:40px;}</style><scriptsrc="http://code.jquery.com/jquery-1.8.0.min.js";></script></head><body><divclass="img"></div><ul><!-- data-* 自定義屬性 --><!-- jquery 有一個(gè) data 方法可以直接獲取--><lidata-src="1.mp3">在見</li><lidata-src="2.mp3">長安街</li></ul><!-- loop="loop" 循環(huán)播放 --><!-- autoplay 自動(dòng)播放 --><audiocontrols loop="loop"autoplay="autoplay"><sourcesrc="1.mp3"type="audio/mp3"></source></audio><spanclass="volume"data-volume="0.1">+</span><spanclass="volume"data-volume="-0.1">-</span><script>varaudio=$("audio").get(0);//監(jiān)聽 音頻播放$(audio).on("play",function(){$(".img").addClass("runing");});//監(jiān)聽 音頻暫停$(audio).on("pause",function(){$(".img").removeClass("runing");//暫停的時(shí)候 判斷當(dāng)前音樂是否播放完畢if(audio.ended){//播放完畢時(shí) ended 狀態(tài)為 trueaudio.currentTime=0;//設(shè)置因?yàn)檫M(jìn)度為 0audio.src="2.mp3"; //修改音樂播放地址audio.play(); //播放}});$(".volume").on("click",function(){//取出自定義屬性上的 值，用來區(qū)分 加 減varvolume=audio.volume+$(this).data("volume");if(volume>1){volume=1;//聲音最大為 1}if(volume<0){volume=0;//最小為 0 0 為靜音}audio.volume=volume;})$("li").on("click",function(){varsrc=$(this).data("src");//設(shè)置音頻的播放時(shí)間audio.currentTime=0;audio.src=src;audio.play();//播放// audio.pause(); //暫停});</script></body> </html>原文作者：祈澈姑娘
技術(shù)博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，愛折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題，堅(jiān)持記錄工作中所所思所見，歡迎大家一起探討交流。
轉(zhuǎn)載于:https://www.cnblogs.com/wangting888/p/9701496.html
總結(jié)
以上是生活随笔為你收集整理的前端切图:自制简易音乐播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 各种排序实现以及稳定性分析
- 下一篇： HTML/CSS[收藏]