中文文档 | 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

| Prop | Description | Type | Default | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------- | ------------------ | | audio-list | Audio playlist | Array<Object> | - | | playback-rates | Playrate setting list | Array<Number> | [0.5, 1, 1.5, 2] | | show-play-button | Whether to display the play button | Boolean | true | | show-prev-button | Whether to display the previous button | Boolean | true | | show-next-button | Whether to display the next button | Boolean | true | | show-volume-button | Whether to display the volume button | Boolean | true | | show-progress-bar | Whether to display a progress bar | Boolean | true | | show-playback-rate | Whether to display the play rate button | Boolean | true | | show-play-loading | Whether to display loading on playback | Boolean | true | | isLoop | Whether the list plays in a loop | Boolean | true | | disabled-progress-drag | Disable progress bar drag functionality | Boolean | false | | disabled-progress-click | Disable progress bar clickable functionality | Boolean | false | | progress-interval | Progress update interval | Number | 1000 | | theme-color | Theme color | String | #e35924 | | before-play | The callback function before the play startsThe play starts after next() is called | (next)=>void | - | | before-prev | Play the previous callback functionAfter calling next(), the previous song starts playing | (next)=>void | - | | before-next | Play the callback function before the next songAfter calling next(), the next song starts playing | (next)=>void | - | | The rest is consistent with native audio |

Event

| Event | Description | Callback | | ------------------------------------------ | --------------------------------------------------------------------------------------------------- | -------- | | play | Triggers when the play starts | - | | pause | Trigger after play pause | - | | play-prev | Triggers after playing the previous song | - | | play-next | Triggers after playing the next song | - | | play-error | Triggered after play error,The parameters are the same as those of the native 'play' method | data | | playing | The play fires every progressInterval second | - | | timeupdate | Triggered when the current play position is sent to change | event | | loadedmetadata | The run script is triggered when the duration of the media element and other media have loaded data | event | | ended | Trigger after audio playback | event | | progress-start | Trigger before moving the progress bar | event | | progress-move | Triggered when moving the progress bar | event | | progress-end | Triggered after moving the progress bar | event | | progress-click | Click the progress bar to trigger | event | | The rest is consistent with native audio |

Slot

| Name | Description | | ---------- | ------------------------------------------------------------------------ | | play-prev | Play prev button,The replaceable button icon function remains unchanged | | play-start | Play start button,The replaceable button icon function remains unchanged | | play-pause | Play pause button,The replaceable button icon function remains unchanged | | play-next | Play next button,The replaceable button icon function remains unchanged |

Data

| Variable | Description | Default | | ---------------- | --------------------------------- | ------- | | currentPlayIndex | The audio index currently playing | 0 | | isPlaying | Whether the audio is playing | false | | duration | Audio duration | '' | | currentTime | Current playback time of audio | '' | | playbackRate | Current playback rate of audio | 1 |

Call with ref，see the components for more data

Method

| Method | Description | Parameters | | -------- | ----------- | ---------------------------------------- | | play | Start | (opts?: { currentTime: number }) => void | | pause | Pause | - | | playPrev | Previous | - | | playNext | Next | - |

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.