Comment importer des chansons dans vue music

Avec le développement de la technologie Internet, la musique est devenue un élément indispensable de la vie des gens modernes. Dans l'interface de lecture de musique, Vue.js, en tant que l'un des frameworks JavaScript les plus populaires à l'heure actuelle, est apprécié pour son code concis et sa haute reproductibilité. Alors, comment importer des chansons lors de la création d'un lecteur de musique à l'aide de Vue.js ? Ci-dessous, nous présenterons en détail la méthode d'importation de chansons Vue.js.

Tout d'abord, assurez-vous d'avoir installé Vue.js et importé Vue.js dans votre projet.

1. Créez une nouvelle liste de chansons

Tout d'abord, créez une liste de chansons dans votre projet Vue.js. Compte tenu de l'évolutivité du programme, nous ne recommandons pas de remplir manuellement chaque chanson dans le fichier html, mais d'utiliser la fonction de liaison de données de Vue.js pour générer automatiquement une liste de chansons.

Vous pouvez écrire le code suivant dans le composant 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>

Ce code générera automatiquement une liste de trois chansons dans votre page. Vous devez remplacer le tableau songs par votre liste de chansons. 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>

这段代码将歌曲列表更新为一个包含歌曲名、歌曲源文件所在的路径和文件名的对象数组，并使用 b97864c2e0ef2353a16c4d64c7734e92 标签使各歌曲源文件作为 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的 b97864c2e0ef2353a16c4d64c7734e92 标签的 src 属性中，并调用 play()

Importez le fichier source de la chanson

Maintenant, vous avez généré avec succès une liste de chansons et l'avez attribuée à l'attribut songs du composant Vue.js. Ensuite, nous devons importer les fichiers sources de la chanson dans le projet.

Vous pouvez importer le fichier source de la chanson dans le composant Vue.js via le code suivant :

rrreee🎜Ce code met à jour la liste des chansons dans un tableau d'objets contenant le nom de la chanson, le chemin et le nom du fichier source de la chanson, et utilise la balise b97864c2e0ef2353a16c4d64c7734e92 provoque l'importation de chaque fichier source de chanson dans la page en tant que bloc de composant de Vue.js. 🎜
🎜Réaliser la lecture des chansons🎜🎜🎜Après avoir terminé l'importation des chansons, nous devons encore implémenter la fonction de lecture des chansons. 🎜🎜Vous pouvez lire des chansons via le code Vue.js suivant : 🎜rrreee🎜Ce code contient une méthode playSong(index) , qui est déclenchée lorsque l'utilisateur clique sur la liste des chansons et spécifiera Ajouter le chemin du fichier source de la chanson vers l'attribut src de la balise b97864c2e0ef2353a16c4d64c7734e92 dans Vue.js, et appelez la méthode <code> play() pour lire la chanson Play. 🎜🎜Maintenant, vous avez réussi à créer un lecteur de musique simple à l'aide de Vue.js et à importer des chansons avec succès. 🎜🎜Résumé : 🎜🎜Vue.js est un framework javascript extrêmement excellent, qui nous apporte beaucoup de commodité. Dans cet article, nous présentons la méthode d'utilisation de Vue.js pour importer des chansons et réaliser la lecture de chansons. Si vous n'êtes pas encore familier avec Vue.js, j'espère que cet article vous sera utile. 🎜

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!