Vue Music に曲をインポートする方法

インターネット技術の発展により、音楽は現代人の生活に欠かせないものになりました。音楽再生インターフェースでは、現在最も人気のあるJavaScriptフレームワークの一つであるVue.jsが、コードの簡潔さと再現性の高さで人気を集めています。では、Vue.js を使用して音楽プレーヤーを構築するときに曲をインポートするにはどうすればよいでしょうか?以下ではVue.jsの曲インポート方法を詳しく紹介します。

まず、Vue.js がインストールされ、プロジェクトに Vue.js がインポートされていることを確認してください。

1. 曲リストの作成

まず、Vue.js プロジェクトで曲リストを作成します。プログラムの拡張性を考慮すると、HTML ファイルに各曲を手動で入力するのではなく、Vue.js のデータ バインディング機能を使用して自動的に曲リストを生成することをお勧めします。

Vue.js コンポーネント内に次のコードを記述できます:

<template>
  <div>
    <ul>
      <li v-for="song in songs">
        {{song.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'src': 'http://xxx.mp3'},
          {'name': '歌曲2', 'src': 'http://xxx.mp3'},
          {'name': '歌曲3', 'src': 'http://xxx.mp3'}
        ]
      }
    }
  }
</script>

このコードは、ページ内に 3 曲のリストを自動的に生成します。 songs 配列を曲リストに置き換える必要があります。

2. 曲ソース ファイルのインポート

これで、曲リストが正常に生成され、Vue.js の songs 属性に割り当てられました。成分 。次に、曲のソース ファイルをプロジェクトにインポートする必要があります。

次のコードを使用して、Vue.js コンポーネントに曲のソース ファイルをインポートできます。

<template>
  <div>
    <ul>
      <li v-for="(song, index) in songs">
        <audio :src="song.url + '/' + song.fileName"></audio>
        {{song.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'url': 'http://xxx.com/songs', 'fileName': 'song1.mp3'},
          {'name': '歌曲2', 'url': 'http://xxx.com/songs', 'fileName': 'song2.mp3'},
          {'name': '歌曲3', 'url': 'http://xxx.com/songs', 'fileName': 'song3.mp3'}
        ]
      }
    }
  }
</script>

このコードは、曲のリストを、曲名、パス、およびファイルが含まれるファイルに更新します。曲のソース ファイルが見つかりました。オブジェクト配列に名前を付け、 <audio> タグを使用して、各曲のソース ファイルを Vue.js のコンポーネント ブロックとしてページにインポートします。

3. 曲の再生を実現する

曲のインポートが完了したら、曲の再生機能も実装する必要があります。

次の Vue.js コードを通じて曲を再生できます:

<template>
  <div>
    <ul>
      <li v-for="(song, index) in songs" 
        @click="playSong(index)">
        {{song.name}}
      </li>
      <audio ref="player"></audio>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        songs: [
          {'name': '歌曲1', 'url': 'http://xxx.com/songs', 'fileName': 'song1.mp3'},
          {'name': '歌曲2', 'url': 'http://xxx.com/songs', 'fileName': 'song2.mp3'},
          {'name': '歌曲3', 'url': 'http://xxx.com/songs', 'fileName': 'song3.mp3'}
        ]
      }
    },
    methods: {
      playSong (index) {
        let player = this.$refs.player
        player.src = this.songs[index].url + '/' + this.songs[index].fileName
        player.play()
      }
    }
  }
</script>

このコードには、ユーザーが [トリガー] をクリックしたときに使用される playSong(index) メソッドが含まれています。曲リストがトリガーされると、指定した曲ソース ファイルのパスを Vue.js の <audio> タグの src 属性に追加し、 play を呼び出します。 () 曲を再生する方法。

これで、Vue.js を使用してシンプルな音楽プレーヤーを構築し、曲を正常にインポートできました。

概要:

Vue.js は非常に優れた JavaScript フレームワークであり、私たちに多くの利便性をもたらします。この記事では、Vue.jsを使って楽曲をインポートし、楽曲の再生を実現する方法を紹介します。 Vue.js にまだ慣れていない場合は、この記事が役立つことを願っています。

以上がVue Music に曲をインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。