Ich werde Vue verwenden, um einen Musikplayer zu erstellen, aber jetzt sind einige Probleme aufgetreten, daher werde ich zuerst den Code veröffentlichen:

main.js Teil:

const store = new Vuex.Store({
  state: {
    songList: [{
      name: 'For You',
      id: '28001046',
      duration: '03:18',
      arname: 'Madeon'
    }]
  }
｝

player.vue-Bereich

<audio ref="player" @canplay="musicTime" @ended="ended" id="v-player-music">
  <source :src="mp3Url">
</audio>

export default {
  data () {
    return {
      mp3Url: ''
    }
  },
  created: function () {
    this.axios.get('http://localhost:3000/music/url?id=' + this.$store.state.songList[0].id).then(res => {
      this.mp3Url = res.data.data[0].url;
    });
  }
}

(Der obige Code wählt nur die nützlichen Teile aus)

Das Folgende sind die von der API zurückgegebenen Daten

Das Problem ist nun, dass der Player bei korrektem Einlesen der MP3 zwar die Dauer des Liedes anzeigen sollte, nun aber die Dauer nicht gelesen werden kann und die Musik nicht abgespielt werden kann

Bedeutet das, dass die MP3-Datei nicht richtig gelesen wird, ich denke aber, dass es kein Problem mit meinem Code geben sollte und auf der Konsole kein Fehler gemeldet wird. Was ist also das Problem? Wie kann ich MP3-Dateien richtig laden?