Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ディレクトリは次のとおりです。

実行効果は図に示されています。

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <スタイル タイプ="text/css">
   * {
    マージン: 0;
    パディング: ;
   }
   ul {
    リストスタイル: なし;
   }
   ul li {
    マージン: 20px;
    パディング: 10px 5px;
    境界線の半径: 3px;
   }
   ul li.active {
    背景色: 水色;
   }
      ＃コントロール {
    幅: 100%;
    高さ:80px;
   }
   .next、.before {
    幅: 100ピクセル;
    高さ: 80px;
    背景色: 水色;
 
   }
   h1 {
       色: 赤
   }
   
  </スタイル>
 </head>
 <本文>
    <div id="アプリ">
   
     <audio :src="currentSrc" controls="controls" autoplay="自動再生" @ended="changEnd"></audio>
       <h1>単なるコード ポーター以上の存在</h1>
      <ul>
       <li :class='{active:index === currentIndex}' v-for='(item,index) in musicData' :key="item.id" @click="changeSong(item.songSrc,index)">
     <h2>{{item.id }}---曲名: {{item.name}}----{{item.author}}</h2>
    </li>
      </ul>
   <div id="コントロール">
    <button class="before" type="button" @click="beforeSong" >前の曲</button>
    <button class="next" type="button" @click="nextSong" >次の曲</button>
   </div>
   
     
    </div>
    <script type="text/javascript">
     const musicData = [{
          id: 1,
    名前: 「私はあなたが好きです」
    著者: 'キット・チャン'、
    曲ソース: './status/Kit Chan- I Like You.mp3'
     },
     {
      id: 2,
      名前: 「また会いたいよ」
      著者: 「リトル・グース」
      songSrc: './status/小鹅- I miss you again.mp3'
     }
     ];
     var アプリ = 新しい Vue({
      el: '#app',
      データ： {
       音楽データ、
       現在のインデックス: 0,
       currentSrc: './status/小鹅- I miss you again.mp3'
      },
      メソッド: {
       changeSong (src,index) {
        this.currentSrc = src;
        this.currentIndex = インデックス;
       },
       変更終了() {
       this.currentIndex++;
       if(this.currentIndex===this.musicData.length){
      this.currentIndex = 0;
       }
       this.currentSrc = this.musicData[this.currentIndex].songSrc; 
       },
       次の曲() {
        this.currentIndex++;
        if(this.currentIndex===this.musicData.length){
          this.currentIndex = 0;
        }
         this.currentSrc = this.musicData[this.currentIndex].songSrc; 
        コンソールログ(this.currentIndex)
       },
       前の曲() {
        
        if(this.currentIndex===0){
         this.currentIndex=this.musicData.length; 
        }
         this.currentIndex--;
         this.currentSrc = this.musicData[this.currentIndex].songSrc; 
       }
       
       
      }
     })
    </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: