Erstellen Sie einen Musikplayer mit nativem JS

Dieses Mal bringe ich Ihnen ein natives JS zum Erstellen eines Musikplayers. Was sind die Vorsichtsmaßnahmen für das Erstellen eines nativen JS zum Erstellen eines Musikplayers? Schauen Sie mal rein.

Vorwort  

Ich habe kürzlich JS rezensiert und finde, dass Musikplayer ziemlich interessant sind. Heute werde ich unser nativstes JS verwenden, um einen kleinen Musikplayer zu schreiben~

Hauptfunktionen:

1. Unterstützt Schleife und Zufallswiedergabe

 2. Unterstützt die Bilddrehung während der Wiedergabe

3. Klicken Sie auf den

Fortschrittsbalken , um die Wiedergabeposition und Lautstärke anzupassen

4. Zeigen Sie die Musikwiedergabezeit an

5. Unterstützt das Wechseln von Liedern: vorheriges Lied, nächstes Lied, klicken Sie auf den Liedtitel, um die Wiedergabe anzuhalten usw. ~

Es gibt zwei Möglichkeiten, Musik hinzuzufügen:

① Sie können ein Audio-Tag verwenden, sodass die Adresse der Musik in einem Array

gespeichert werden soll ②Die zweite Möglichkeit besteht darin, ein paar Audio-Tags hinzuzufügen, wenn mehrere Lieder vorhanden sind, und dann die gesamte Hintergrundmusik abzurufen (im Beispiel fügen wir zuerst drei Musikstücke hinzu und fügen sie in ein Array ein. Natürlich können Sie jedes beliebige Lied auswählen du magst.

<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>

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

1 Klick zum Abspielen, Pause

Das erste, worüber wir uns im Klaren sein sollten, ist, dass beim Klicken auf die Schaltfläche zum Spielen Folgendes erreicht werden sollte:

①Die Musik beginnt zu spielen

②Der Fortschrittsbalken beginnt sich vorwärts zu bewegen, während das Lied abgespielt wird

③Das Bild beginnt sich zu drehen, während das Lied abgespielt wird

④Die Wiedergabezeit beginnt

Dementsprechend können wir die Wiedergabe pausieren lassen, wenn wir erneut auf die Wiedergabetaste klicken:

①Lied pausiert;

② Halten Sie gleichzeitig den Fortschrittsbalken an

③ Unterbrechen Sie gleichzeitig die Wiedergabezeit

④Das Bild hört auf, sich zu drehen

Hinweis: Die oben genannten Start- und Pausenvorgänge müssen synchronisiert werden!

Nachdem wir unsere Ideen geklärt haben, können wir sie einzeln umsetzen~

Klicken Sie auf Wiedergabe/Pause

 //点击播放、暂停
  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";
     }
 }

Da sich „Wiedergabe“ und „Pause“ auf derselben Schaltfläche befinden, werden die oben genannten Methoden aufgerufen. Werfen wir einen detaillierten Blick darauf, welche Funktionen jede Funktion implementiert:

Bilddrehung

//图片旋转，每30毫米旋转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);
 }

Das Obige ist die Funktion zum Drehen des Bildes, wenn die Musik abgespielt wird.

Dieselbe Funktion löscht den

-Timer . Wenn die Musik angehalten wird, wird imagePause() aufgerufen und der Bildrotations-Timer gelöscht:

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

Auf diese Weise haben wir die Funktion der Bilddrehung bereits implementiert~

Fortschrittsbalken

Definieren Sie zunächst zwei Ps mit derselben Breite, Länge und unterschiedlichen Farben. Verwenden Sie das Attribut

aktuelleZeit, um die aktuelle Wiedergabezeit auf Null zu setzen, und verwenden Sie dann das aktuelle Wiedergabeereignis Durch Anpassen der Länge von p kann der Effekt einer Bildlaufleiste erzielt werden.

function jindutiao(){
   //获取当前歌曲的歌长
   var lenth=play[index].duration;
    timer1=setInterval(function(){
    cur=play[index].currentTime;//获取当前的播放时间
     fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
      },50)
}

Auf diese Weise ist der Fortschrittsbalken abgeschlossen~

Spielzeit

Auch die Wiedergabezeit von Musik kann jederzeit mit currenttime geändert werden, es ist jedoch zu beachten, dass die Zeiteinheit von currenttime Sekunden ist.

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

2 Lieder schneidenIch habe zwei Möglichkeiten zum Schneiden von Liedern gewählt:

①Klicken Sie auf die Schaltflächen „Vorheriges Lied“ und „Nächstes Lied“, um zwischen den Liedern zu wechseln

 //上一曲
  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();
        }

②Klicken Sie auf den Songtitel, um zwischen den Songs zu wechseln

 //点击文字切歌
        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();
            }
          }
        }

Hinweis: Vergessen Sie beim Songwechsel nicht unseren Fortschrittsbalken!

Löschen Sie den Timer für das Scrollen des Fortschrittsbalkens und stellen Sie dann die Länge von p auf 0 zurück Gleichzeitig stoppt die Musik:

//将进度条置0
 function reducejindutiao(){
     clearInterval(timer1);
      fillbar.style.width="0";
 }

Alle Timer löschen:

 function qingkong(){//清空所有的计时器
    imagePause();
    clearInterval(timer2);
 }

3点击进度条调整播放进度及音量

首先应该理清一下逻辑：当点击进度条的时候，滚动条的宽度应该跟鼠标的offsetX一样长，然后根据进度条的长度来调整听该显示的时间。

(1) 给滚动条的p添加一个事件，当滚动条长度变化的时候歌曲的当前播放的时间调整，300是滚动条的总长度；

//调整播放进度
 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属性（值为零到一）；

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

4随机、循环播放

循环播放音乐的时候，直接index++当index的范围超过歌曲的长度的时候，index=0重新开始。随机播放的函数类似，当歌曲播放完毕的时候，随机产生一个0到play.length的数字就可以了。

 //随机播放歌曲
  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);
        }

这样我们整个音乐播放器就完成了，大家可以自己写一个好看的界面，就更完美了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue中computed属性的使用方法

ajax与跨域jsonp

用requireJS添加返回顶部功能

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Musikplayer mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!