2.0.4 • Published 12 months ago

@liripeng/vue-audio-player v2.0.4

Weekly downloads
1
License
MIT
Repository
github
Last release
12 months ago

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

PropDescriptionTypeDefault
audio-listAudio playlistArray<Object>-
playback-ratesPlayrate setting listArray<Number>[0.5, 1, 1.5, 2]
show-play-buttonWhether to display the play buttonBooleantrue
show-prev-buttonWhether to display the previous buttonBooleantrue
show-next-buttonWhether to display the next buttonBooleantrue
show-volume-buttonWhether to display the volume buttonBooleantrue
show-progress-barWhether to display a progress barBooleantrue
show-playback-rateWhether to display the play rate buttonBooleantrue
show-play-loadingWhether to display loading on playbackBooleantrue
isLoopWhether the list plays in a loopBooleantrue
disabled-progress-dragDisable progress bar drag functionalityBooleanfalse
disabled-progress-clickDisable progress bar clickable functionalityBooleanfalse
progress-intervalProgress update intervalNumber1000
theme-colorTheme colorString#e35924
before-playThe callback function before the play startsThe play starts after next() is called(next)=>void-
before-prevPlay the previous callback functionAfter calling next(), the previous song starts playing(next)=>void-
before-nextPlay the callback function before the next songAfter calling next(), the next song starts playing(next)=>void-
The rest is consistent with native audio

Event

EventDescriptionCallback
playTriggers when the play starts-
pauseTrigger after play pause-
play-prevTriggers after playing the previous song-
play-nextTriggers after playing the next song-
play-errorTriggered after play error,The parameters are the same as those of the native 'play' methoddata
playingThe play fires every progressInterval second-
timeupdateTriggered when the current play position is sent to changeevent
loadedmetadataThe run script is triggered when the duration of the media element and other media have loaded dataevent
endedTrigger after audio playbackevent
progress-startTrigger before moving the progress barevent
progress-moveTriggered when moving the progress barevent
progress-endTriggered after moving the progress barevent
progress-clickClick the progress bar to triggerevent
The rest is consistent with native audio

Slot

NameDescription
play-prevPlay prev button,The replaceable button icon function remains unchanged
play-startPlay start button,The replaceable button icon function remains unchanged
play-pausePlay pause button,The replaceable button icon function remains unchanged
play-nextPlay next button,The replaceable button icon function remains unchanged

Data

VariableDescriptionDefault
currentPlayIndexThe audio index currently playing0
isPlayingWhether the audio is playingfalse
durationAudio duration''
currentTimeCurrent playback time of audio''
playbackRateCurrent playback rate of audio1

Call with ref,see the components for more data

Method

MethodDescriptionParameters
playStart(opts?: { currentTime: number }) => void
pausePause-
playPrevPrevious-
playNextNext-

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.

1.6.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.4

12 months ago

2.0.1

1 year ago

2.0.0

1 year ago

1.5.3

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.4.0

3 years ago

1.5.0

3 years ago

1.4.1-beta1

3 years ago

1.5.1-beta

3 years ago

1.4.1-beta

3 years ago

1.3.0-beta1

3 years ago

1.3.0-beta4

3 years ago

1.3.0-beta3

3 years ago

1.3.0

3 years ago

1.3.0-beta5

3 years ago

1.2.11

4 years ago

1.2.10

4 years ago

1.2.9

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago