This time I will bring you native JS to make a music player. What are the precautions for making a music player using native JS. Here are practical cases. Let’s take a look. .

Previous words????????????????????????????????????????????????????? I've been reviewing JS recently, and I think music players are quite interesting. Today I'm going to write a small music player using our most native JS~

The main function:

?? 1. Support loop and random play

2. Support image rotation during playback

?? 3. Support clicking on the

progress bar

to adjust the playback position and volume ?? 4. Display the music playback time

5. Supports switching songs: previous song, next song, click on the song title to switch songs; pause playback, etc.~

There are two ways to add music:

① You can use an audio tag, so that the address of the music should be stored in an array;

②The second way is to add a few audio tags if there are several songs, and then get all the background music (in the example, we first add three pieces of music and put them into an array. Of course, you can choose any song you like. ).

<audio id="play1">
???<source src="auto/旅行.mp3"></source>
</audio>
<audio id="play2">
???<source src="auto/薛明媛,朱賀 - 非酋.mp3"></source>
</audio>
<audio id="play3">
???<source src="auto/楊宗緯 - 越過山丘.mp3"></source>
</audio>

rrree

1Click to play and pause

The first thing we should be clear about is that when clicking the button to play, the following should be implemented:

①The music starts playing;

②The progress bar starts to move forward as the song plays;

③The picture starts to rotate as the song plays;

④The playback time starts;

Correspondingly, when we click the play button again, we can make it pause:

①The song pauses;

② Let the progress bar pause at the same time;

③ Pause the playback time at the same time;

④The picture stops rotating;

Note: The above start and pause operations must be synchronized!

After clarifying our ideas, we can implement them one by one~

Click to play/pause

play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];

Because play and pause are on the same button, the above methods will be called. Let’s take a detailed look at what functions each function implements:

Picture rotation

?//點擊播放、暫停
??function?start(){
???minute=0;
????if(flag){
??????imagePause();
??????play[index].pause();
?????}else{
??????rotate();
??????play[index].play();
??????reducejindutiao();
??????addtime();
??????jindutiao();
??????for?(var?i=0;i<play.length;i++) {
        audioall[i].style.color="white";
         }
      audioall[index].style.color="red";
     }
 }

The above is the function of image rotation. When the music is playing, calling the rotate() function can realize the rotation of the image!

Also clear the

timer

function. When the music is paused, imagePause() is called, and the image rotation timer is cleared:

//圖片旋轉(zhuǎn)，每30毫米旋轉(zhuǎn)5度
  function rotate(){
    var deg=0;
    flag=1;
    timer=setInterval(function(){
    image.style.transform="rotate("+deg+"deg)";
      deg+=5;
       if(deg>360){
????????deg=0;
????????}
????},30);
?}

In this way, we have already implemented the function of image rotation~

progress bar

First define two p's with the same width, length, and different colors. Use the

current

time attribute to pass the current playback time. Set the initial length of a p to zero, and then use the current playback event to Adjusting the length of p can achieve the effect of a scroll bar.

function?imagePause(){
????clearInterval(timer);
????flag=0;
?}

In this way, the progress bar is completed~

play time

The playback time of music is also changed at any time using currenttime, but it should be noted that the timing unit of currenttime is seconds.

function?jindutiao(){
???//獲取當前歌曲的歌長
???var?lenth=play[index].duration;
????timer1=setInterval(function(){
????cur=play[index].currentTime;//獲取當前的播放時間
?????fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
??????},50)
}

2 Cutting songs

I have done two ways to achieve cutting songs: ①Click the previous song and next song buttons to switch songs;

//播放時間
???function?addtime(){
??????timer2=setInterval(function(){
???????cur=parseInt(play[index].currentTime);//秒數(shù)
????????var?temp=cur;
???????minute=parseInt(temp/60);
???????if(cur%60<10){
       time.innerHTML=""+minute+":0"+cur%60+"";
        }else{
            time.innerHTML=""+minute+":"+cur%60+"";
         }
      },1000);
}

②Click on the song title to switch between songs;

 //上一曲
  function reduce(){
          qingkong();
          reducejindutiao();
          pauseall();
          index--;
          if(index==-1){
            index=play.length-1;
          }
          start();
        }
        //下一曲
        function add(){
          qingkong();
          reducejindutiao();
          pauseall();
          index++;
          if(index>play.length-1){
????????????index=0;
??????????}
??????????start();
????????}

Note: Don’t forget our progress bar when switching songs!

Clear the timer for the progress bar scrolling, and then restore the length of p to 0;

?//點擊文字切歌
????????function?change(e){
??????????var?musicName=e.target;
??????????//先清空所有的
??????????for?(var?i=0;i<audioall.length;i++)?{
????????????audioall[i].style.color="white";
????????????if(audioall[i]==musicName){
??????????????musicName.style.color="red";
??????????????qingkong();
??????????????reducejindutiao();
??????????????pauseall();
??????????????index=i;
??????????????start();
????????????}
??????????}
????????}

At the same time the music stops:

//將進度條置0
?function?reducejindutiao(){
?????clearInterval(timer1);
??????fillbar.style.width="0";
?}

Clear all timers:

?function?qingkong(){//清空所有的計時器
????imagePause();
????clearInterval(timer2);
?}

3點擊進度條調(diào)整播放進度及音量

首先應該理清一下邏輯：當點擊進度條的時候，滾動條的寬度應該跟鼠標的offsetX一樣長，然后根據(jù)進度條的長度來調(diào)整聽該顯示的時間。

(1) 給滾動條的p添加一個事件，當滾動條長度變化的時候歌曲的當前播放的時間調(diào)整，300是滾動條的總長度；

//調(diào)整播放進度
?function?adjust(e){
???var?bar=e.target;
???var?x=e.offsetX;
???var?lenth=play[index].duration;
???fillbar.style.width=x+"px";
???play[index].currentTime=""+parseInt(x*lenth/300)+"";
???play[index].play();
}

(2) 改變音量的滾動條，跟改變播放時間類似，利用volume屬性（值為零到一）；

?//調(diào)整音量大小
??function?changeVolume(e){
????var?x=e.offsetX+20;
????play[index].volume=parseFloat(x/200)*1;
????//改變按鈕的位置
?????volume3.style.left=""+x+"px";
}

4隨機、循環(huán)播放

循環(huán)播放音樂的時候，直接index++當index的范圍超過歌曲的長度的時候，index=0重新開始。隨機播放的函數(shù)類似，當歌曲播放完畢的時候，隨機產(chǎn)生一個0到play.length的數(shù)字就可以了。

?//隨機播放歌曲
??function?suiji(e){
??????????var?img=e.target;
??????????img2.style.border="";
??????????img.style.border="1px?solid?red";
????????}
????????//順序播放
????????function?shunxu(e){
??????????var?img=e.target;
??????????img1.style.border="";
??????????img.style.border="1px?solid?red";
??????????clearInterval(suijiplay);
??????????shunxuplay=setInterval(function(){
????????????if(play[index].ended){
??????????????add();
????????????}
??????????},1000);
????????}

這樣我們整個音樂播放器就完成了，大家可以自己寫一個好看的界面，就更完美了

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

Vue中computed屬性的使用方法

ajax與跨域jsonp

用requireJS添加返回頂部功能

The above is the detailed content of Make a music player with native JS. For more information, please follow other related articles on the PHP Chinese website!