@futuremeng/vue-audio-player

1.5.13 • Public • Published

Vue Audio Player Component


中文文档 | English Document

Features

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

Use

Step one:

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

or

yarn install -S @futuremeng/vue-audio-player

Step two:

// global import
import AudioPlayer from '@futuremeng/vue-audio-player'

Vue.use(AudioPlayer)

or

// part import
import AudioPlayer from '@futuremeng/vue-audio-player'

components: {
  AudioPlayer
}

Step three:

<template>
  <div>
    {{ currentAudioName || audioList[0].name }}
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList.map(elm => elm.url)"
      :before-play="handleBeforePlay"
      theme-color="#ff2929"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          name: 'audio1',
          url: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'
        },
        {
          name: 'audio2',
          url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
        }
      ]
    }
  },

  methods: {
    // Something to do before playing
    handleBeforePlay(next) {
      // There are a few things you can do here...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name

      next() // Start playing
    }
  }
}
</script>

Prop

Prop Explain Type Default
audio-list Audio playlist Array -
playback-rates Playrate setting list Array<Number> [0.5, 1, 1.5, 2]
show-loop-button Whether to display the loop switch button Boolean true
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-info-botton Whether to display the info button Boolean true
is-loop 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
loop-interval interval before return to play first Number 3000
next-interval interval before play next Number 1000
theme-color Theme color String #e35924
before-play The callback function before the play starts
The play starts after next() is called
(next)=>void -
before-prev Play the previous callback function
After calling next(), the previous song starts playing
(next)=>void -
before-next Play the callback function before the next song
After calling next(), the next song starts playing
(next)=>void -
The rest is consistent with native audio

Event

Event Explain 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
loop Click the loop button to change isLoop event
info Click the info button to show info event
list-end Triggered after audio-list to the end event

Slot

Name Explain
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 Explain 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 Explain Callback
play Start -
pause Pause -
playPrev Previous -
playNext Next -

Call with ref,see the components for more methods

Update log

v1.5.10【2023/07/24】

  • Feature:Event list-end

v1.5.8【2023/07/24】

  • Feature:show-loop-button、show-info-botton、show-error-message、loopInterval、nextInterval
  • Feature:loop、info

v1.5.2【2023/07/12】

  • Fix: When I select double playback speed, it doesn't work when the next song is played.

v1.5.1【2023/03/29】

  • Improvement: Beautify UI

v1.5.0【2022/03/20】

  • Feature:Vue2 and Vue3 work fine
  • Feature:Don't need import CSS file

v1.4.0【2022/03/05】

  • Feature:Slot play-prevplay-startplay-pause and play-next
  • Feature:play-error event
  • Improvement:Appearance and layout

v1.3.0【2022/01/25】

  • Improvement:Reduced package volume
  • Modify:Style import changed to import '@futuremeng/vue-audio-player/lib/style.css'

v1.2.11【2021/06/17】

  • Feature:disabled-progress-drag prop
  • Feature:disabled-progress-click prop
  • Feature:progress-start event
  • Feature:progress-move event
  • Feature:progress-end event
  • Feature:progress-click event

FAQ

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.

Package Sidebar

Install

npm i @futuremeng/vue-audio-player

Weekly Downloads

23

Version

1.5.13

License

MIT

Unpacked Size

43.3 kB

Total Files

6

Last publish

Collaborators

  • futuremeng