Cuando la etiqueta de audio en vue usa referencias para obtener la duración y devuelve NaN

Recientemente, al desarrollar un sitio web de música, me encontré con una situación en la que quería usar la duración del audio para obtener la duración total de la canción, pero el resultado siempre fue NAN y no se encontró ningún resultado después de buscar durante mucho tiempo.

Luego observé que NAN aparecía solo cuando hacía clic demasiado rápido. Mi suposición personal puede ser que la barra de progreso no ha terminado de cargar la canción al obtener la canción. Es decir, obtendremos la duración total antes de que se cargue la canción.

Sin embargo, no soy bueno con la tecnología, así que finalmente pensé en un temporizador y puse el tiempo en dos segundos, para poder obtener los datos.

 setTimeout(() => {
                console.log(this.$refs.audio.duration)
            }, 2000);

Los métodos anteriores también se pueden obtener. Le pregunté a mis amigos hoy y finalmente encontré el método correcto.

La razón para obtener NAN es que la música no se ha cargado. En este momento, debe agregarla en la etiqueta de audio.

@canplay="puedenjugar"

De esta forma podemos jugar(){

// Obtenga la duración total de la música aquí

}

Frente

<audio   :src="musicdetail.play_url" @canplay="canplaysong" autoplay="true"></audio>

métodos dentro

canplaysong(){
            let total=parseInt(this.$refs.audio.duration)
                this.musictotaltimemode=total
                let minute=total % 60
                let seconds=(total-minute)/60
                this.musictotaltime=seconds+':'+minute
        },

Así no habrá NAN

Supongo que te gusta

Origin blog.csdn.net/qq_43644046/article/details/123532976
Recomendado
Clasificación