Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For vue 2, after pausing and replaying, the music plays slower in a low key. #150

Open
niubility000 opened this issue Mar 19, 2024 · 9 comments

Comments

@niubility000
Copy link

For vue 2, after pausing and replaying, the music plays slower in a low key, unless you refresh the whole page.
I checked from Internet, they said we could disable the timer to avoid this problem. But I can's find where to set the Timer.

@niubility000
Copy link
Author

Also, in iphone, when I try to pause, it get stuck.

@staskobzar
Copy link
Owner

this is not enough information to identify and reproduce the problem. Which plugin? What code? Both problems are on iphone?
Vue 2 is not maintained anymore but problem what you describe is a core audio playback functionality and should be working as any other playback.
Unfortunatelly, I do not have iphone to try or reproduce it.
I can try to fix it if you provide more infromation or, even the best, some console errors or exceptions

@niubility000
Copy link
Author

niubility000 commented Mar 19, 2024

this is not enough information to identify and reproduce the problem. Which plugin? What code? Both problems are on iphone? Vue 2 is not maintained anymore but problem what you describe is a core audio playback functionality and should be working as any other playback. Unfortunatelly, I do not have iphone to try or reproduce it. I can try to fix it if you provide more infromation or, even the best, some console errors or exceptions

Thank you very much for your instant reply.
Just try this:
filebrowser.zip
Unzip it (It's a windows version filebrower I modified), and put some mp3 files in the same folder with filebrowser.exe, and double click filebrowser.exe, visit it at 127.0.0.1:8080 in your browser with admin:admin. and click a mp3 file to play. And pause and replay. you can reproduce the problem.

I just changed the preview.vue:

  <div class="preview">
    <transition 
  appear
  :enter-active-class="animateIn"
  :leave-active-class="animateOut"
      :appear-active-class="animateIn"
>   
      <ExtendedImage v-if="req.type == 'image'" class="switchAnimation" :key="raw" :src="raw"></ExtendedImage>
      <av-bars
        class="switchAnimation"
    :key="raw"
        v-else-if="req.type == 'audio'"
        caps-color="#FFF"
        :bar-color="['#f00', '#ff0', '#0f0']"
        canv-fill-color="#000"
        :caps-height="4"
        :audio-src="raw"
        :canv-width= "400"
        :cav-height="200"
        :symmetric="false"
        :fft-size="8192"
        :brick-height="80"
      ></av-bars>
      <video class="switchAnimation"
      :key="raw"

...

in main.js:
import AudioVisual from "vue-audio-visual";
Vue.use(AudioVisual)

in package.json:

"vue-audio-visual": "^2.5.1",

I think this is the last verion for vue2.

@staskobzar
Copy link
Owner

Sorry, I am not going to run any exe file and, besides, I am not using Windows.
It seems you are using too many wrappers and problem can be from anywhere.

Code inside <av-bars/> seems to be quite usual but not clear what is inside "raw" variable.
May be you can check some kind of console in your app and check for errors or warning that can help?
As I said, the playback is just a usual <audio> element and the plugin can not slow it down as it just reads audio data and use to draw the graphics.

@niubility000
Copy link
Author

niubility000 commented Mar 20, 2024

Or, just try this demo website with test:test
http://deleted/

The problem maybe not only from me. I found a comment mentioned this problem too: https://www.bilibili.com/video/BV1ML4y1t7MY/?spm_id_from=333.337.search-card.all.click&vd_source=ef1034ecaf582b017611a29def006413

@staskobzar
Copy link
Owner

yes, I see now. It does going slower after pause/play on your website (using chrome).
However, seems to be working fine in firefox.

I tried your file (nice music btw) with plugin vue3 demo and it has no problem playing after the pause.
Will try to see with vue2 version and try to figure out.

BTW, did you try it with https certificate secure connection? It may have difference in chrome

@niubility000
Copy link
Author

yes, I see now. It does going slower after pause/play on your website (using chrome). However, seems to be working fine in firefox.

I tried your file (nice music btw) with plugin vue3 demo and it has no problem playing after the pause. Will try to see with vue2 version and try to figure out.

BTW, did you try it with https certificate secure connection? It may have difference in chrome

Thank you for your patient test. I didn't try it with https. My tplink router's ddns service maybe don't support it.

@staskobzar
Copy link
Owner

well, I could not find a source of the problem yet but it seems it is the case for <av-bars/> plugin even with a basic settings in older v2 version of the plugin. So, it is not your code.
Also, it probably appeared recently as it was working before. Maybe some updates in webkit.

It works ok in new v3 version of the plugin.
I would recommend to update to vue3 and the latest version of the plugin.
I undestand that it is not easy to do for some applications. I will try to do more checks.

@niubility000
Copy link
Author

well, I could not find a source of the problem yet but it seems it is the case for <av-bars/> plugin even with a basic settings in older v2 version of the plugin. So, it is not your code.

Also, it probably appeared recently as it was working before. Maybe some updates in webkit.

It works ok in new v3 version of the plugin.

I would recommend to update to vue3 and the latest version of the plugin.

I undestand that it is not easy to do for some applications. I will try to do more checks.

Just take your time. and don't worried. The filebrowser project is moving to Vue3 slowly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants