Créer un lecteur de musique avec JS natif

Cette fois, je vais vous apporter un JS natif pour créer un lecteur de musique. Quelles sont les précautions pour créer un JS natif pour créer un lecteur de musique. Ce qui suit est un cas pratique. jetez un oeil.

Préface  

J'ai récemment examiné JS et je pense que les lecteurs de musique sont assez intéressants. Aujourd'hui, je vais utiliser notre JS le plus natif pour écrire un petit lecteur de musique ~

. Fonctions principales :

1. Boucle de support et lecture aléatoire

 2. Prise en charge de la rotation de l'image pendant la lecture

3. Support en cliquant sur la barre de progression pour régler la position de lecture et le volume

4. Afficher la durée de lecture de la musique

5. Prend en charge le changement de chanson : chanson précédente, chanson suivante, cliquez sur le titre de la chanson pour changer de chanson, etc.~

; Il existe deux façons d'ajouter de la musique :

① Vous pouvez utiliser une balise audio, afin que l'adresse de la musique soit stockée dans un tableau

 ; ②La deuxième façon consiste à ajouter quelques balises audio s'il y a plusieurs chansons, puis à obtenir toute la musique de fond (dans l'exemple, nous ajoutons d'abord trois morceaux de musique et les mettons dans un tableau. Bien sûr, vous pouvez choisir n'importe quelle chanson tu aimes).

<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 clic pour jouer, mettre en pause

La première chose que nous devons savoir est qu'en cliquant sur le bouton pour jouer, les éléments suivants doivent être obtenus :

①La musique commence à jouer

②La barre de progression commence à avancer au fur et à mesure de la lecture de la chanson

 ; ③L'image commence à tourner pendant la lecture de la chanson

④Le temps de lecture commence

En conséquence, lorsque nous cliquons à nouveau sur le bouton de lecture, nous pouvons le mettre en pause :

① Pause de la chanson ;

② Mettez la barre de progression en pause en même temps

③ Mettez le temps de lecture en pause en même temps

④L'image cesse de tourner

Remarque : Les opérations de démarrage et de pause ci-dessus doivent être synchronisées !

Après avoir clarifié nos idées, nous pouvons les mettre en œuvre une par une~

Cliquez sur lecture/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";
     }
 }

Étant donné que la lecture et la pause sont sur le même bouton, les méthodes ci-dessus seront appelées. Examinons en détail les fonctions implémentées par chaque fonction :

. Rotation des images

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

Ce qui précède est la fonction de rotation de l'image Lorsque la musique joue, appeler la fonction rotate() peut réaliser la rotation de l'image !

La même fonction efface le minuteur Lorsque la musique est en pause, imagePause() est appelée et le minuteur de rotation de l'image est effacé :

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

. De cette façon, nous avons déjà implémenté la fonction de rotation de l'image~

Barre de progression

Définissez d'abord deux p avec la même largeur, la même longueur et des couleurs différentes. Utilisez l'attribut currenttime pour transmettre la durée de lecture actuelle. Définissez la longueur initiale d'un p sur zéro, puis utilisez l'événement de lecture actuel pour. Ajuster la longueur de p peut obtenir l’effet d’une barre de défilement.

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

De cette façon, la barre de progression est complétée~

Temps de jeu

La durée de lecture de la musique est également modifiée à tout moment en utilisant l'heure actuelle, mais il convient de noter que l'unité de synchronisation de l'heure actuelle est la seconde.

//播放时间
   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 Couper des chansonsJ'ai utilisé deux façons de couper des chansons :

①Cliquez sur les boutons de la chanson précédente et de la chanson suivante pour changer de chanson

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

 ; ②Cliquez sur le titre de la chanson pour basculer entre les chansons

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

Remarque : N'oubliez pas notre barre de progression lorsque vous changez de chanson !

Effacez le minuteur pour le défilement de la barre de progression, puis restaurez la longueur de p à 0

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

 ; Au même moment la musique s'arrête :

 //音乐停止
   function pauseall(){
        for (var i=0;i<play.length;i++) {
            if(play[i]){
              play[i].pause();
            }
          }
        }

Effacer toutes les minuteries :

 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添加返回顶部功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!