前端切图:自制简易音乐播放器
生活随笔
收集整理的這篇文章主要介紹了
前端切图:自制简易音乐播放器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
音樂播放器是一個非常常見的應用，這篇博客就是介紹如何制作一個簡單的音樂播放器，這款音樂播放器具有以下的功能：圖片旋轉功能，點擊播放，點擊暫停播放的功能，音量調大調小功能，設置音頻的播放時間，循環播放，自動播放，切換歌曲功能。
效果如下：
圖片發自簡書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 有一個 data 方法可以直接獲取--><lidata-src="1.mp3">在見</li><lidata-src="2.mp3">長安街</li></ul><!-- loop="loop" 循環播放 --><!-- autoplay 自動播放 --><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);//監聽 音頻播放$(audio).on("play",function(){$(".img").addClass("runing");});//監聽 音頻暫停$(audio).on("pause",function(){$(".img").removeClass("runing");//暫停的時候 判斷當前音樂是否播放完畢if(audio.ended){//播放完畢時 ended 狀態為 trueaudio.currentTime=0;//設置因為進度為 0audio.src="2.mp3"; //修改音樂播放地址audio.play(); //播放}});$(".volume").on("click",function(){//取出自定義屬性上的 值，用來區分 加 減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");//設置音頻的播放時間audio.currentTime=0;audio.src=src;audio.play();//播放// audio.pause(); //暫停});</script></body> </html>原文作者：祈澈姑娘
技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
轉載于:https://www.cnblogs.com/wangting888/p/9701496.html
總結
以上是生活随笔為你收集整理的前端切图:自制简易音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 各种排序实现以及稳定性分析
- 下一篇： ubuntu安装qtcreator