ネイティブJSで音楽プレーヤーを作る

今回はネイティブJSで音楽プレーヤーを作る方法をお届けします。ネイティブJSで音楽プレーヤーを作る際の注意点を実際に見てみましょう。

前の言葉 最近 JS をレビューしていて、音楽プレーヤーは非常に興味深いと思います。今日は最もネイティブな JS を使用して小さな音楽プレーヤーを作成します~

。 主な機能:

1. ループとランダムプレイをサポート

2. 再生中の画像回転をサポート

3.

プログレスバー

をクリックして再生位置を調整し、音量を調整することをサポートします 4.音楽の再生時間を表示

5. 曲の切り替えをサポートします: 前の曲、次の曲、曲のタイトルをクリックして再生を一時停止します。~

音楽を追加するには 2 つの方法があります:

① audio タグを使用して、音楽のアドレスを配列に格納することができます。 ② 2 番目の方法は、曲が複数ある場合にオーディオ タグをいくつか追加し、すべての BGM を取得することです (この例では、まず 3 つの音楽を追加して配列に入れます。もちろん、任意の曲を選択できます)好きです）。

リーリー

1 クリックして再生、一時停止

まず明確にしておきたいのは、ボタンをクリックして再生すると、次のことが達成される必要があるということです: ①音楽が流れ始めます

②曲の再生に合わせてプログレスバーが進み始めます

③曲が再生されると画像が回転し始めます

④再生時間が始まります

同様に、再生ボタンをもう一度クリックすると、一時停止することができます:

①曲が一時停止します

② 同時に進行状況バーを一時停止します

③ 同時に再生時間を一時停止します

④写真の回転が止まります

注: 上記の開始操作と一時停止操作は同期する必要があります。

アイデアを明確にしたら、一つずつ実行していきます~

再生/一時停止をクリック

rreee

再生と一時停止は同じボタン上にあるため、上記のメソッドが呼び出されます。各関数がどのような機能を実装しているかを詳しく見てみましょう。 写真の回転

rreee

以上が画像回転の関数ですが、音楽再生中にrotate()関数を呼び出すことで画像の回転を実現できます。

タイマーをクリアするために同じ関数が使用されます。音楽が一時停止されると、imagePause() が呼び出され、画像回転タイマーがクリアされます:

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

。 このようにして、画像回転機能を実装しました~

進行状況バー

まず、同じ幅、長さ、異なる色を持つ 2 つの p を定義します。

current

time 属性を使用して、p の初期の長さを 0 に設定し、次に現在の再生イベントを通じて p の長さを調整します。スクロール バーの効果を実現できます。 りー このようにして、プログレスバーが完成しました~

遊びの時間

音楽の再生時間もcurrenttimeを用いて随時変更されますが、currenttimeの計時単位は秒であることに注意してください。

りー

2 カット曲 カット曲を実現するために 2 つの方法を実行しました:

①前の曲と次の曲のボタンをクリックして曲を切り替えます。 ②曲名をクリックして曲を切り替えます。 注: 曲を切り替えるときは、進行状況バーを忘れないでください。

プログレスバーのスクロールタイマーをクリアし、p の長さを 0 に戻します

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

; その間、音楽は止まります:

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

すべてのタイマーをクリア:

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

以上がネイティブJSで音楽プレーヤーを作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。