New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@liripeng/vue-audio-player

Package Overview
Dependencies
Maintainers
1
Versions
58
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@liripeng/vue-audio-player - npm Package Compare versions

Comparing version 1.5.3 to 1.6.0

5

package.json
{
"name": "@liripeng/vue-audio-player",
"version": "1.5.3",
"version": "1.6.0",
"description": "Simple and practical Vue audio player component for PC mobile terminal（简单实用的 PC 移动端的 Vue 音频播放器组件）",

@@ -23,3 +23,4 @@ "license": "MIT",

"vue3",
"vue2"
"vue2",
"mp3"
],

@@ -26,0 +27,0 @@ "scripts": {

178

README.md

@@ -18,2 +18,3 @@ <h3 align="center" style="margin: 30px 0 35px;">Vue Audio Player Component</h3>

## Features
- `Vue2` and `Vue3` are supported

@@ -27,3 +28,5 @@ - Simple and practical

## Use
### Step one：
```

@@ -34,2 +37,3 @@ npm i -S @liripeng/vue-audio-player

### Step two：
```

@@ -41,3 +45,5 @@ // global import

```
or
```

@@ -53,12 +59,16 @@ // part import

### Step three：
```
<template>
<div>
{{ currentAudioName || audioList[0].name }}
<div class="name">
{{ currentAudioName || audioList[0].title }}
</div>
<audio-player
ref="audioPlayer"
:audio-list="audioList.map(elm => elm.url)"
:audio-list="audioList?.map((item) => item.src)"
:before-play="handleBeforePlay"
theme-color="#ff2929"
/>
:show-play-loading="false"
>
</audio-player>
</div>

@@ -74,10 +84,19 @@ </template>

{
name: 'audio1',
url: 'https://www.0dutv.com/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'
src: 'http://music.163.com/song/media/outer/url?id=317151.mp3',
title: 'Audio Title 1',
artist: 'Artist Name 1',
album: 'Album Name 1',
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',
},
],
},
{
name: 'audio2',
url: 'https://www.0dutv.com/upload/dance/20200316/C719452E3C7834080007662021EA968E.mp3'
}
]
src: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3',
title: 'Audio Title 2',
},
],
}

@@ -87,10 +106,10 @@ },

methods: {
// Something to do before playing
// Use this function if you want to do something before you start playing
handleBeforePlay(next) {
// There are a few things you can do here...
this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
this.currentAudioName =
this.audioList[this.$refs.audioPlayer.currentPlayIndex].title
next() // Start playing
}
}
next() // Start play
},
},
}

@@ -101,67 +120,72 @@ </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-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` | - |
| Prop | Explain | 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 | 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` |
| 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` |
## Slot
| Name | Explain |
| - | - |
| play-prev | Play prev button,The replaceable button icon function remains unchanged |
| 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 |
| 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` |
| 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](https://github.com/1014156094/vue-audio-player/blob/master/packages/audio-player/index.vue)
## Method
| Method | Explain | Callback |
| - | - | - |
| play | Start | - |
| pause | Pause | - |
| playPrev | Previous | - |
| playNext | Next | - |
| Method | Explain | Callback |
| -------- | -------- | -------- |
| play | Start | - |
| 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)

@@ -171,19 +195,36 @@

### v1.6.0【2024/06/04】
- Feature: Lock screen can set the cover and switch to the next song and so on
### v1.5.3【2023/11/29】
- Feature: `showPlayLoading` prop
### 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-prev`、`play-start`、`play-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 '@liripeng/vue-audio-player/lib/style.css'`
### v1.2.11【2021/06/17】
- Feature：`disabled-progress-drag` prop

@@ -204,2 +245,3 @@ - Feature：`disabled-progress-click` prop

Example:
```js

@@ -220,5 +262,7 @@ this.$refs.audioPlayer.$refs.audio.currentTime = 100 // Jump to 100 seconds

## 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`.
packages/index.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc