Vue实现简单音乐播放

冷不防 2023-06-06 03:53 10阅读 0赞

## 1.使用html的audio标签 ##

<template>
      <div>
        <aplayer autoplay :music="songs2[0]">
        </aplayer>
        <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong">
        </audio>
        <h2>{
       {'歌曲:' + this.songs[currentIndex].name}}</h2>
        <p>{
       {'歌手:' + this.songs[currentIndex].singer}}</p>
        <h3>歌曲列表</h3>
        <ul v-for="(song, index) in songs" :key="song.id">
          <li @click="playMusic(index)" :class="[song.id == currentIndex ? activeClass : '']">{
       {song.id + '、' +song.name }}</li>
        </ul>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'Music',
      data () {
        return {
          songs: [
            {id: 0, name: '漂洋过海来看你', singer: '王丽坤+朱亚文', src: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3'},
            {id: 1, name: '绿色', singer: '陈香凝', src: '../../../../static/music/绿色-陈香凝.mp3'},
            {id: 2, name: '清平调', singer: '王菲', src: '../../../../static/music/王菲 - 清平调.mp3'}
          ]
          currentIndex: 0,
          currentSrc: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3',
          activeClass: 'active'
        }
      },
      methods: {
        nextSong () {
          // console.log(currentIndex)
          if (this.currentIndex < this.songs.length - 1) {
            this.currentIndex += 1
          } else {
            this.currentIndex = 0
          }
          this.currentSrc = this.songs[this.currentIndex].src
          console.log('currentIndex:' + this.currentIndex)
          console.log('currentSrc:' + this.currentSrc)
        },
        playMusic (id) {
          console.log('id:' + id)
          if (this.currentIndex !== id) {
            this.currentIndex = id
            this.currentSrc = this.songs[this.currentIndex].src
          }
        }
      }
    }
    </script>
    
    <style scoped>
      ul li {
        cursor: pointer;
        list-style-type: none;
        width: 100px;
      }
      .active {
        background-color: #1989FA;
      }
    
    </style>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]

## 2.vue-aplayer ##

发现html提供的audio标签是无法自动适应屏幕的，从网上找了个vue音乐播放组件vue-aplay  
首先`cnpm install --save vue-aplayer`  
然后

<template>
      <div>
        
        <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong">
        </audio>
      
      </div>
    </template>
    import Aplayer from 'vue-aplayer'
    export default {
      name: 'Music',
      data () {
        return {
        
          songs2: [
            {id: 0,
              title: '漂洋过海来看你',
              author: '王丽坤+朱亚文',
              url: '../../../../static/music/漂洋过海来看你-王丽坤+朱亚文.mp3',
              pic: '../../../../static/music/music.jpg',
              lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'},
            {id: 1,
              title: '绿色',
              author: '陈香凝',
              url: '../../../../static/music/绿色-陈香凝.mp3',
              pic: '../../../../static/music/music.jpg',
              lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'},
            {id: 2,
              title: '清平调',
              author: '王菲',
              url: '../../../../static/music/王菲 - 清平调.mp3',
              pic: '../../../../static/music/music.jpg',
              lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'}
          ]
        }
      },
      
      
      components: {
        'aplayer': Aplayer
      }
    }
    </script>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]  
比html的audio好看，而且可以根据屏幕大小变化

vue-aplayer github地址：[https://github.com/SevenOutman/vue-aplayer][https_github.com_SevenOutman_vue-aplayer]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]: /images/20230601/5a332654c14748c19ce017e05c918efe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/49abd5a593a749768b3d156aabf97627.png
[https_github.com_SevenOutman_vue-aplayer]: https://github.com/SevenOutman/vue-aplayer