Récemment, lors du développement d'un site Web de musique, j'ai rencontré une situation où je voulais utiliser la durée de l'audio pour obtenir la durée totale de la chanson, mais le résultat était toujours NAN, et aucun résultat n'a été trouvé après une longue recherche.
Ensuite, j'ai observé que NAN n'apparaissait que lorsque je cliquais trop vite. Ma conjecture personnelle est peut-être que la barre de progression n'a pas fini de charger la chanson lors de l'obtention de la chanson. C'est-à-dire que nous obtiendrons la durée totale avant que la chanson ne soit chargée.
Cependant, je ne suis pas bon en technologie, alors j'ai finalement pensé à une minuterie et j'ai réglé l'heure sur deux secondes, afin que je puisse obtenir les données
setTimeout(() => {
console.log(this.$refs.audio.duration)
}, 2000);Les méthodes ci-dessus peuvent également être obtenues.J'ai demandé à mes amis aujourd'hui et j'ai finalement trouvé la bonne méthode.
La raison de l'obtention de NAN est que la musique n'a pas été chargée. À ce stade, vous devez l'ajouter dans la balise audio
@canplay="peut jouer"
De cette façon, nous pouvons jouer(){
// Obtenez la durée totale de la musique ici
}
Devant
<audio :src="musicdetail.play_url" @canplay="canplaysong" autoplay="true"></audio>méthodes à l'intérieur
canplaysong(){
let total=parseInt(this.$refs.audio.duration)
this.musictotaltimemode=total
let minute=total % 60
let seconds=(total-minute)/60
this.musictotaltime=seconds+':'+minute
},De cette façon, il n'y aura pas de NAN