So importieren Sie Songs in Vue Music

Mit der Entwicklung der Internettechnologie ist Musik zu einem unverzichtbaren Bestandteil des Lebens moderner Menschen geworden. In der Musikwiedergabeschnittstelle ist Vue.js als eines der derzeit beliebtesten JavaScript-Frameworks wegen seines prägnanten Codes und seiner hohen Reproduzierbarkeit beliebt. Wie importiert man also Songs beim Erstellen eines Musikplayers mit Vue.js? Im Folgenden stellen wir die Song-Importmethode von Vue.js im Detail vor.

Stellen Sie zunächst sicher, dass Sie Vue.js installiert und Vue.js in Ihr Projekt importiert haben.

1. Erstellen Sie eine Songliste

Erstellen Sie zunächst eine Songliste in Ihrem Vue.js-Projekt. In Anbetracht der Skalierbarkeit des Programms empfehlen wir nicht, jedes Lied manuell in die HTML-Datei einzutragen, sondern die Datenbindungsfunktion von Vue.js zu verwenden, um automatisch eine Liedliste zu generieren.

Sie können den folgenden Code in die Vue.js-Komponente schreiben:

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

Dieser Code generiert automatisch eine Liste mit drei Songs auf Ihrer Seite. Sie müssen das Array songs durch Ihre Songliste ersetzen. 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()

Song-Quelldatei importieren

Jetzt haben Sie erfolgreich eine Songliste generiert und diese Vue.js zugewiesen Die Eigenschaft songs der Komponente. Als nächstes müssen wir die Song-Quelldateien in das Projekt importieren.

Sie können die Song-Quelldatei in die Vue.js-Komponente über den folgenden Code importieren:

rrreee#🎜🎜#Dieser Code aktualisiert die Songliste in eine Datei, die den Songnamen und die enthält Speicherort der Song-Quelldatei. Verwenden Sie das Tag <audio>, um jede Song-Quelldatei als Komponentenblock von Vue.js zu importieren. #🎜🎜#<ol start="3">#🎜🎜#Song-Wiedergabe realisieren#🎜🎜##🎜🎜##🎜🎜#Nachdem wir den Import von Songs abgeschlossen haben, müssen wir auch die Song-Wiedergabefunktion implementieren. #🎜🎜##🎜🎜#Sie können das Lied über den folgenden Vue.js-Code abspielen: #🎜🎜#rrreee#🎜🎜#Dieser Code enthält eine <code> playSong(index) -Methode. Diese Methode ist wird ausgelöst, wenn der Benutzer auf die Songliste klickt, fügt den Pfad der angegebenen Songquelldatei zum Attribut src des Tags von Vue.js hinzu und ruft die Methode play()

auf, um Lieder abzuspielen. #🎜🎜##🎜🎜#Jetzt haben Sie erfolgreich einen einfachen Musikplayer mit Vue.js erstellt und erfolgreich Songs importiert. #🎜🎜##🎜🎜#Zusammenfassung: #🎜🎜##🎜🎜#Vue.js ist ein äußerst hervorragendes Javascript-Framework, das uns viel Komfort bietet. In diesem Artikel stellen wir die Methode vor, mit Vue.js Songs zu importieren und die Wiedergabe von Songs zu realisieren. Wenn Sie mit Vue.js noch nicht vertraut sind, hoffe ich, dass dieser Artikel für Sie hilfreich ist. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo importieren Sie Songs in Vue Music. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!