1014156094 / vue-audio-player Goto Github PK

你好，请使用下面的链接创建 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

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

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.）

https://codesandbox.io/s/liripengvue-audio-player-issue-moban-cb57s?file=/src/App.vue&resolutionWidth=320&resolutionHeight=675
您好，在使用您的组件过程中，发现进度条出现0:60的情况，应该显示为1：00，想烦请您解决，谢谢~

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.

部分情况下，ios playing不触发

图片不知道怎么传上来

播放时会初始化一次点的位置，具体偏移多少取决于点的this.$refs.audioProgressPoint.offsetWidth。
带来的后果就是，如果this.$refs.audioProgressPoint这个点稍微大了一点点，那么初始化的时候就会出现显著的向左偏移（尤其是移动端）

在火狐浏览器中，this.$refs.mp3player.play() 会出现 t.$refs.audio.play(...) a undefined
谷歌浏览器无问题

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获取元素后手动聚焦），且无法使用鼠标移动光标进行选中复制（未解决）

请打开下面的链接后点击右上角 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

package.json

"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"
  },

main.js

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>

data数据

audioPreviewConfig: {
        // 是否显示播放按钮
        showPlayButton: true,
        // 是否显示上一首按钮
        showPrevButton: false,
        // 是否显示下一首按钮
        showNextButton: false,
        // 倍速播放频率
        playbackRates:[0.5, 1, 1.5, 2],
        // 音频播放列表
        audioList:[],
        // 插件主题
        themeColor : "#409eff",
      }

页面效果

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.

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):

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>

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.

我需要是把进度条放上面，控制放下面那种。无奈，你这个是打包好的，我也改不了里面的样式，以及修改新的功能。
希望作者可以修改一下

可以加个音量调节么？

ios或者vivo自带的浏览器 在初始化加载后，无法显示时长，
因为ios是异步的，而且他获取时长是播放后才能获取到时长。

Hi,

would it please be possible to add a "stop()" method, which

• stops playing
• sets the progress to 0

Thank you

this.$refs.audioPlayer.pause();

自动播放音频列表时，遇到加载失败的文件，能够自动跳过播放下一条么，需要如何设置？

单击控制按钮（播放、暂停、上一首、下一首）控制台出现 Uncaught ReferenceError: s is not defined

例如 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引用的的。找不到引用的文件。不知道怎么修改这个函数。

1.2.8 版本中，组件所在的页面关闭时控制台一直报错
can't access property "currentTime", this.$refs.audio is undefined。
组件杀死定时器并没有清除

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.

    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?

你好，请使用下面的链接创建 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

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.

无法自动播放

如题

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.

我要是实现的功能是类似于歌词滚动效果的，所以需要playing()播放中触发事件。我目前没有看懂作者你 playing()方法的调用方式

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')
    }

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.

描述：进度条的bug

你好，我想问下这个进度条拖动要怎么引入那个touchemulator脚本？

这段代码写的有问题，每次拖拽的时候触发play就会生成一个新的定时器，然后又产出一个声音

安装报错：

Hi,

sometimes a loading spinner is visible when clicking on the progress bar.

Is is possible to turn this off?

你好，ios手机端加载完播放器后，点击进度条，再点击播放，进度条会跳转到0，从0开始播放，请问可以调整为从当前点击位置开始播放吗？

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)

Describe the bug
如题

你好，小米手机自带浏览器，拖动进度条时，会返回起点。。

播放音乐时，当我切换到另一个页面，音乐被打断