@liripeng/vue-audio-player

<h3 align="center" style="margin: 30px 0 35px;">Vue Audio Player Component</h3> <p align="center"> <img src="https://img.shields.io/npm/v/@liripeng/vue-audio-player.svg" /> <img src="https://img.shields.io/bundlephobia/min/@liripeng/vue-audio-player" /> <img src="https://img.shields.io/github/stars/1014156094/vue-audio-player" /> <img src="https://img.shields.io/github/forks/1014156094/vue-audio-player" /> <img src="https://img.shields.io/github/license/1014156094/vue-audio-player" /> </p> --- ## [中文文档](./README_CN.md) | **English Document** ## <a href="https://codesandbox.io/p/sandbox/immutable-browser-cb57s?file=%2Fsrc%2FApp.vue%3A4%2C51&resolutionHeight=675&resolutionWidth=320">Online Demo</a> <img src="https://github.com/1014156094/vue-audio-player/blob/master/example.jpg?raw=true" width="300"> ## 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 starts<br>The play starts after `next()` is called | `(next)=>void` | - | | before-prev | Play the previous callback function<br>After calling `next()`, the previous song starts playing | `(next)=>void` | - | | before-next | Play the callback function before the next song<br>After 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](https://github.com/1014156094/vue-audio-player/blob/master/packages/audio-player/index.vue) ## 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](https://github.com/1014156094/vue-audio-player/blob/master/packages/audio-player/index.vue) ## [Update Log](./UPDATE_LOG.md) ## FAQ - <a href="https://github.com/1014156094/vue-audio-player/issues/21">Background playback control is not supported?</a> - <a href="https://github.com/1014156094/vue-audio-player/issues/46">The browser of some mobile phones is 0 after loading due to asynchronous problems</a> - <a href="https://github.com/1014156094/vue-audio-player/issues/50">Unable to play automatically?</a> - Realize custom play position or continue to play? Example: ```js 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 <img src="https://github.com/1014156094/vue-audio-player/blob/master/pay.jpg?raw=true" width="200"> ## 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`.