1014156094 / vue-audio-player Goto Github PK
View Code? Open in Web Editor NEWCompact, simple and practical PC mobile audio player components(小巧简单实用的 PC 移动端的 Vue 音频播放器组件)
License: MIT License
Compact, simple and practical PC mobile audio player components(小巧简单实用的 PC 移动端的 Vue 音频播放器组件)
License: MIT License
可以加个音量调节么?
On iPhone, I the player won't load. The console prints out below error.
I am not sure what to make out of it; happy to provide more details if you guide me what I shall provide
[Log] 为了解决 iOS 设备接口异步请求后出现无法播放问题,请无视 The play() request was interrupted by a call to pause() 错误 (index-zYvrgO69.js, line 5)
[Error] Unhandled Promise Rejection: NotSupportedError: The operation is not supported.
play
play (index-zYvrgO69.js:5:41164)
play
pt (index-zYvrgO69.js:1:12821)
$e (index-zYvrgO69.js:1:12900)
za (index-zYvrgO69.js:1:14893)
za
R (index-zYvrgO69.js:1:93301)
Y (index-zYvrgO69.js:1:97863)
pt (index-zYvrgO69.js:1:12821)
$e (index-zYvrgO69.js:1:12900)
n (index-zYvrgO69.js:1:59953)
请打开下面的链接后点击右上角 fork,然后放您的代码上去复现问题,最后将链接发出来,以便作者排查,谢谢。(Please open the link below and click on the top right corner fork, then put your code to duplicate the problem, and finally post the link for the author to check, thank you.)
https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?file=/src/App.vue&resolutionWidth=320&resolutionHeight=675
您好,在使用您的组件过程中,发现进度条出现0:60的情况,应该显示为1:00,想烦请您解决,谢谢~
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
Hi,
would it please be possible to add a "stop()" method, which
Thank you
例如 mp3时长是 1:05:01 只会显示 05:01
原因是函数:
// 格式化秒为分
formatTime: function formatTime(second) {
return [parseInt(second / 60 % 60), parseInt(second % 60)].join(':').replace(/\b(\d)\b/g, '0$1');
},
我项目是vue引用的的。找不到引用的文件。不知道怎么修改这个函数。
图片不知道怎么传上来
Hi LiRiPeng,
since I upgraded to the latest version (1.5.3), I see the following terminal output when I start my application (yarn vite).
Sourcemap for "/node_modules/@any-touch/core/dist/index.es.js" points to missing source files
Sourcemap for "/node_modules/@any-touch/pan/dist/index.es.js" points to missing source files
Sourcemap for "/node_modules/any-event/dist/index.es.js" points to missing source files
Sourcemap for "/node_modules/@any-touch/compute/dist/index.es.js" points to missing source files
Sourcemap for "/node_modules/@any-touch/shared/dist/index.es.js" points to missing source files
Sourcemap for "/node_modules/@any-touch/vector/dist/index.es.js" points to missing source files
Do you know what this is about? Is this a regression?
When I remove "import AudioPlayer from '@liripeng/vue-audio-player'" from my main.ts, the error is gone.
Cheers
Hi,
I've been trying to make use of the events, particularly the "ended" event.
I want to trigger a function (super simple example below) once the player has reached the end, but I cant figure out how to do it.
It would be great if you could share an example, potentially in the docs
function triggerOnEnd() {
console.log('Has ended')
}
this.$refs.audioPlayer.pause();
ios或者vivo自带的浏览器 在初始化加载后,无法显示时长,
因为ios是异步的,而且他获取时长是播放后才能获取到时长。
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
请打开下面的链接后点击右上角 fork,然后放您的代码上去复现问题,最后将链接发出来,以便作者排查,谢谢。(Please open the link below and click on the top right corner fork, then put your code to duplicate the problem, and finally post the link for the author to check, thank you.)
"dependencies": {
"@liripeng/vue-audio-player": "^1.4.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.19.1",
"echarts": "4.9.0",
"element-ui": "2.15.6",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.2.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"vue": "2.6.12",
"vue-aliplayer": "^1.0.0",
"vue-aplayer": "^1.6.1",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-json-viewer": "^2.2.14",
"vue-meta": "2.4.0",
"vue-mini-player": "^0.2.1",
"vue-mobile-audio": "^0.1.3",
"vue-router": "3.4.9",
"vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/style.css'
Vue.use(AudioPlayer)
<el-form-item label="在线试听" prop="previewFileUrl">
<audio-player v-if="!audioDestroy"
ref="audioPlayer"
:audio-list="audioPreviewConfig.audioList"
:playback-rates="audioPreviewConfig.playbackRates"
:show-play-button="audioPreviewConfig.showPlayButton"
:show-prev-button="audioPreviewConfig.showPrevButton"
:show-next-button="audioPreviewConfig.showNextButton"
:theme-color="audioPreviewConfig.themeColor"
></audio-player>
</el-form-item>
audioPreviewConfig: {
// 是否显示播放按钮
showPlayButton: true,
// 是否显示上一首按钮
showPrevButton: false,
// 是否显示下一首按钮
showNextButton: false,
// 倍速播放频率
playbackRates:[0.5, 1, 1.5, 2],
// 音频播放列表
audioList:[],
// 插件主题
themeColor : "#409eff",
}
I trying to create a play/pause button that I can place anywhere on my site (separately from the player). I use v-if to switch what the button displays (depending on whether sound is played or not), and use the "isPlaying" property that I get from the player. The logic I have taken over largely from the example provided in the index.vue.
What I now struggle with is that when I load the page, caused by line 2 below: "!this.$refs.audioPlayer.isPlaying"
TypeError: Cannot read properties of undefined (reading 'isPlaying')
My understanding so far is that the the ref is not yet available when the component gets rendered, for which it causes an issue. I tried using different approaches (mounted, watchers, setup..) but I keep banging my head against the wall.
Any pointers how to address this correctly would be appreciated.
Funny enough: When I change "!this.$refs.audioPlayer.isPlaying" simply to "true" when loading the page, and then replacing the "true" again with the "!this.$refs.audioPlayer.isPlaying" when the page is already loaded, I can see that the button works correctly..
What I have tried is to change the property to the below, but that condition always results in "true"
<div v-if="this.$refs.audioPlayer && !this.$refs.audioPlayer.isPlaying"
Many thanks for any pointers.
PS. I have also created a question on stackoverflow.
<template>
<div v-if="this.$refs.audioPlayer && !this.$refs.audioPlayer.isPlaying" class="audio__play-start" @click.stop="this.$refs.audioPlayer.play"><q-icon name="play_circle"></q-icon></div>
<div v-else class="audio__play-pause" @click.stop="this.$refs.audioPlayer.pause"><q-icon name="pause_circle"></q-icon></div>
<div>
<audio-player
ref="audioPlayer"
:audio-list="audioList.map(elm => elm.url)"
theme-color="black"
:show-prev-button="false"
:show-next-button="false"
:show-play-button="false"
:show-volume-button="false"
:show-playback-rate="false"
/>
</div>
</template>
<script lang="ts">
export default {
data() {
return { audioList: [{ name: 'audio1', url: 'rock.mp3'}]}
},
}
</script>
播放音乐时,当我切换到另一个页面,音乐被打断
Hi,
in the newest version (1.6.3) I experience problems when dragging the progress slider on my iPhone.
I can click on the progress bar, and then the position moves where I clicked. But holding the progress marker and dragging it does not work anymore.
On Safari on my Mac, it works correctly.
你好,请使用下面的链接创建 issue 以帮助我们更快的排查问题。
https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?fontsize=14
Please use the link below to create a new issue.
https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?fontsize=14
我需要是把进度条放上面,控制放下面那种。无奈,你这个是打包好的,我也改不了里面的样式,以及修改新的功能。
希望作者可以修改一下
你好,我想问下这个进度条拖动要怎么引入那个touchemulator脚本?
如题
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
你好,请使用下面的链接创建 issue 以帮助我们更快的排查问题。
https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?fontsize=14
Please use the link below to create a new issue.
https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?fontsize=14
部分情况下,ios playing不触发
When I click on the Online Demo link in the ReadMe, the CodeSandbox tries to open but never loads fully.
Here's what I see with the console open (on Chrome 125.0.6422.114 on iOS 14.4 Sonoma):
Describe the bug
如题
onLoadedmetadata(event) {
this.duration = this.$refs.audio.duration
this.$emit('loadedmetadata', event)
},
This event fires even after the player has been removed. This happens when view holding player gets unmounted, before the player loads media.
Is there some destroy method to be called upon unmount?
你好,小米手机自带浏览器,拖动进度条时,会返回起点。。
在火狐浏览器中,this.$refs.mp3player.play() 会出现 t.$refs.audio.play(...) a undefined
谷歌浏览器无问题
When screen of iPhone is locked, the next song does not play.
This solution here has figured out somehow how the next track can be played: https://github.com/Tresre/music
Demo: https://tresre.dev/music/
Any chance this could be brought to your player too?
What I also really like is that it brings the "previous" and "next" buttons onto the mini-player of iOS on the locked screen.
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
无法自动播放
PC端引入模拟Touch事件后,如果页面中存在input元素,点击input无法选中聚焦(可以通过nextTick获取元素后手动聚焦),且无法使用鼠标移动光标进行选中复制(未解决)
Hi,
when dragging and clicking on the progress bar is disabled, hovering with the mouse over it should have the normal mouse pointer.
Currently, despite not being able to click, the "hand" shows.
你好,ios手机端加载完播放器后,点击进度条,再点击播放,进度条会跳转到0,从0开始播放,请问可以调整为从当前点击位置开始播放吗?
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
I just want to change the currentTime value +-10 seconds using button click, I control the player through ref. But it returns back to the original position immediately. I just use this way, this.audioPlayer.currentTime += 10
All other methods work without any issue.
自动播放音频列表时,遇到加载失败的文件,能够自动跳过播放下一条么,需要如何设置?
播放时会初始化一次点的位置,具体偏移多少取决于点的this.$refs.audioProgressPoint.offsetWidth
。
带来的后果就是,如果this.$refs.audioProgressPoint
这个点稍微大了一点点,那么初始化的时候就会出现显著的向左偏移(尤其是移动端)
我要是实现的功能是类似于歌词滚动效果的,所以需要playing()播放中触发事件。我目前没有看懂作者你 playing()方法的调用方式
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.