JSPM

Vue Audio Player Component

中文文档 | English Document

Online Demo

Features

• Vue2 and Vue3 are supported
• Simple and practical
• High versatility
• Support for progress bar dragging
• Support PC and mobile
• Support Nuxt SSR
• Complete documentation and examples

Use

Step one：

npm i -S @liripeng/vue-audio-player

Step two：

// global import
import VueAudioPlayer from '@liripeng/vue-audio-player'

Vue.use(VueAudioPlayer)

or

// part import
import VueAudioPlayer from '@liripeng/vue-audio-player'

components: {
  VueAudioPlayer
}

Step three：

<template>
  <div>
    <div class="name">
      {{ currentAudioName || audioList[0].title }}
    </div>
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList"
      :before-play="handleBeforePlay"
      :show-play-loading="false"
    >
    </audio-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          src: 'http://music.163.com/song/media/outer/url?id=317151.mp3', // Required
          title: 'Audio Title 1', // Optional，Phone lock screen music player display
          artist: 'Artist Name 1', // Optional，Phone lock screen music player display
          album: 'Album Name 1', // Optional，Phone lock screen music player display
          artwork: [
            {
              src: 'https://upload.jianshu.io/users/upload_avatars/1696356/c358e43854eb?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp',
              sizes: '512x512',
              type: 'image/jpg',
            },
          ], // Optional，Phone lock screen music player display
        },
        {
          src: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3', // Required
          title: 'Audio Title 2', // Optional，Phone lock screen music player display
        },
      ],
    }
  },

  methods: {
    // Use this function if you want to do something before you start playing
    handleBeforePlay(next) {
      this.currentAudioName =
        this.audioList[this.$refs.audioPlayer.currentPlayIndex].title

      next() // Start play
    },
  },
}
</script>

Prop

Event

Slot

Data

Call with ref，see the components for more data

Method

Call with ref，see the components for more methods

Update Log

FAQ

• Background playback control is not supported?

• The browser of some mobile phones is 0 after loading due to asynchronous problems

• Unable to play automatically?

• Realize custom play position or continue to play?

  Example:

  this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds

Browser compatibility

• Internet Explorer：not support
• Firefox：53 and above
• Chrome：51 and above

Reward the author with milk tea

License

MIT

Last

😘If you think it's helpful, click a 'Star',Any problem found in the process of use can be raised Issue, also very welcome to mention PR.