Estoy creando una interfaz Vue para una aplicación de transmisión de música y quiero que el JavaScript de la aplicación salte a la siguiente canción cuando la canción actual haya terminado. Esto funciona perfectamente cuando tengo el sitio abierto en iOS Safari, pero si tengo una pantalla bloqueada y la canción termina allí, el audio se detiene. Lo estoy probando en la última versión de iOS (15.4.1 al momento de escribir esto).
La forma en que lo configuré en Vue es así:
Plantilla Vue:
<template> <div id="player"> <audio ref="player"></audio> </div> </template>JavaScript
<script> ... methods: { initTrack(track) { var player = this.$refs.player; player.src = `http://<API-URL>/stream?id=${track.id}`; player.load(); player.play(); }, } ... mounted() { var player = this.$refs.player; player.onended = () => { if (this.trackQueue.length) this.initTrack(this.trackQueue[0]); } } </script> Encontré esta respuesta hablando de posibles soluciones, y la implementé de la forma en que se describe, para usar el evento onended del reproductor de audio y luego cargar y reproducir la nueva fuente de audio dentro de esa función. Pero sigue sin funcionar.
Quiero probar el paso descrito en la parte inferior de la publicación:
Un truco... configure un ScriptProcessorNode en un contexto de Web Audio. Establezca el tamaño del búfer en 512 muestras o algo así. Luego, en el proceso de secuencia de comandos, fuerce un evento de actualización de tiempo para su elemento de audio. Esto mantiene su JavaScript allí funcionando. ScriptProcessorNode tiene que tener privilegios especiales aquí, por su naturaleza.
Me pregunto cómo se realiza en la práctica la "configuración de ScripProcessorNode" para esta causa específica. Y si alguien tiene algún enfoque actualizado para evitar este comportamiento, ya que esta publicación se escribió hace unos años, agradecería cualquier solución.
Parece que funciona si onended el evento terminado dentro de la misma función que está cargando y reproduciendo la pista, y luego vuelvo a llamar a esa función dentro del evento onended , así:
initTrack(){ this.queueIndex++ this.src = "http://<API-URL>/stream?id=" + this.queue[this.queueIndex].id this.$refs.player.src = this.src this.$refs.player.load() this.$refs.player.play() this.$refs.player.onended = () => { this.initTrack() } } queue es una matriz que contiene todas las canciones que el reproductor debe reproducir. Cada vez que se ejecuta la función initTrack , incrementa el índice actual de esa matriz con queueIndex y luego usa ese índice para cargar y reproducir la siguiente pista de la matriz.
Cada vez que hago clic en una nueva pista para reproducir, restablece la variable queueIndex a -1 .