iOS: Dragging does not work anymore about vue-audio-player HOT 12 OPEN

There is no v1.6.3，You should be fine by updating to the latest v2.0.2 version

from vue-audio-player.

Just upgraded to v2.0.2 - same behavior. Can't seem to slide the position knob anymore on iPhone.

from vue-audio-player.

I have tried the iPhoneX can work normally, what is your iPhone version

from vue-audio-player.

I'm on the iPhone 15 Pro with iOS 17.4.1

from vue-audio-player.

I'm iOS 16.7.7，no problem

from vue-audio-player.

Mh. Could you pls share the code behind this exact example? Will try to isolate what‘s causing this

from vue-audio-player.

<template>
  <div>
    <div class="name">
      {{ currentAudioName || audioList[0].title }}
    </div>

    <vue-audio-player
      ref="audioPlayer"
      :audio-list="audioList"
      :before-play="handleBeforePlay"
      :show-play-loading="false"
      @ended="handleEnded"
    >
    </vue-audio-player>

    <button @click="handlePlaySpecify">Play the second audio</button>
  </div>
</template>

<script>
import VueAudioPlayer from '@liripeng/vue-audio-player'

export default {
  components: {
    VueAudioPlayer,
  },

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

    handlePlaySpecify() {
      this.$refs.audioPlayer.currentPlayIndex = 1
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
        this.title =
          this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
      })
    },

    handleEnded() {
      console.log('ended')
    },
  },
}
</script>

<style scoped>
.name {
  text-align: center;
  line-height: 80px;
}
</style>

from vue-audio-player.

Quick update:

1. The dragging works on your solution; still need to understand why it doesn't on mine

2. On your solution, I always first get a message "Failed to load because no supported source was found." when I click the Play button for the first time, and "The element has no supported sources." when I click for the second time. Only the 3rd time it runs. Do you know why?

3. On the iPhone when I lock the screen, I see the progress and the title of the current song (yay!). However, when I click "Next" or "Previous", it does not load the next song from the vue-audio-player, but it goes to my Apple Music and starts playing music from there. Example: I am playing "Audio Title 1" from Vue. I click "Next" on the lock screen. It jumps to Artist XYZ from Apple Music. I click "Previous", it jumps to Artist ABC from Apple Music (and not to "Audio Title 1"). Seems when clicking "Next" and "Previous" we're leaving the vue-audio-player context and switch (incorrectly) to Apple Music. Do you know why?

4. Last observation: When the Apple Music app plays music, on the lock screen the user can drag the timeline back & forth to change the progress. On vue-audio-player, the timeline seems not to be interactable (on the lock screen). Just wanted to check if you see a way to also add that?

from vue-audio-player.

Can you send your source code to see？Or send a video

from vue-audio-player.

On 1) (leave it with me): still investigating. I'm sure it's not a problem with your application but something I am doing wrong on my side.

On 2) (sorted): I think I know why it happens. The console complains that the mp3 in the example come from a different origin (CORB - Cross Origin Read Blocking). When I change the example to read mp3 from my backend, it works.

On 3) and 4) - Video here: https://github.com/1014156094/vue-audio-player/assets/124743318/9a285b49-0e1e-478a-af6c-eca28b314aa2

Here's the explanation of what you see:
Context:

• Vue App Player has two songs ("Sound 1" and "sound 2")

Position in Seconds:
0: We start on the lock screen. Song 1 is playing in Vue App Player

1: I am trying to move back and forth in the song by sliding over the progress bar. Nothing happens.

2: I click ">>" and the Music Player jumps to "Merengue 7". Note that this is a song on my "Music" app, not of Vue-Player. Instead, it should be jumping to "sound 2"

3: I click "<<" and the Music Player jumps to "Merengue 6". So funny enough, when we came from "Sound 1" and went next, we got to "Merengue 7", but when we go previous from there, we don't get to "Sound 1" but remain in Apple Music player. It seems the Music Player on the lock screen has moved completely away from the vue player context

5: Just to illustrate, since we are now in the context of Apple's "Music" app, we now can navigate within the song to the desired position by swiping (what we could not do in second 2 when I was playing music from vue music player)

10: I unlock the screen, now we see the vue player. I move back and forth to show that we truly have 2 songs ("Sound 1" and "sound 2")

22: I show that the position dragging works on the vue player directly. This is what I was hoping to achieve in second 2 (e.g. that the sliding of the screen-lock progress bar would be passed down to the vue app player)

Summarizing:

• Back & forth in the lock screen leaves the vue-app context and switches to Music-app. This does not happen in this player: https://tresre.dev/music/
• Position dragging from the lock screen does not work (yet?)

Does this help?

from vue-audio-player.

Just wanted to check if the video was helpful and clear?

from vue-audio-player.

Just wanted to check if the video was helpful and clear?

The video is clear, have you found what is causing your problem?

from vue-audio-player.