Die getDuration()-Funktion der Youtube-API gibt weiterhin 0 oder „undefiniert“ zurück. ⇐ JavaScript

[Anonymous]

Ich bin derzeit ein Anfänger in JavaScript und möchte einen YouTube-Player für meine persönliche Website erstellen. Ich möchte, dass der Benutzer auf eine Schaltfläche auf dem Player klicken und zum nächsten oder vorherigen Titel springen kann. Außerdem möchte ich, dass der Benutzer die vollständige Dauer des Lieds sowie weitere Details dazu sieht.
Ich habe versucht, die Funktion „player.getDuration()“ zu verwenden, die mit der Einbettungs-API von YouTube geliefert wird, und den Wert der Variablen „videoLength“ zuzuweisen, aber egal, was ich mache, der zurückgegebene Wert ist undefiniert oder 0, was der Anfangswert in meinem Code ist. Ich glaube, das Problem besteht darin, dass der Player das Video mithilfe der Funktion „loadVideoByUrl()“ erhält, anstatt dass ich die Video-ID in onYouTubeIframeAPIReady() übergebe. Ich möchte die Video-URLs und andere Informationen zu den Songs im Objektarray haben, damit ich weiterhin Songs hinzufügen kann, ohne eine Playlist auf YouTube erstellen zu müssen.
Hier ist der JavaScript-Code. Es ist noch nicht fertig, aber ich würde das gerne herausfinden, bevor ich fortfahre.

Code: Select all

/*Playlist defined as an array of objects*/
let songs = [
{
"title": "Dollz Doll - Sasha Solo",
"artist": "Bratz",
"album": "Dollz Doll",
"year": 2025,
"url": "https://www.youtube-nocookie.com/embed/5mmSXIg6Ig4?si=hdDWCzDytQ-186Y3"
},

{
"title": "Think About It",
"artist": "Bratz",
"album": "Think About It",
"year": 2025,
"url": "https://www.youtube-nocookie.com/embed/lfYl_f8zo9Y?si=5aMcKkeIqR8TCciP"
},

{
"title": "Speed Drive",
"artist": "Charli XCX",
"album": "Barbie The Album",
"year": 2023,
"url": "https://www.youtube-nocookie.com/embed/TxZwCpgxttQ?si=Ymw_FXTfHlbODIkR"
}
]

let songsLength = songs.length;
let i = 0;

/*Selecting the elements*/
let songTitle = document.querySelector('h1');
let songArtist = document.getElementById('artist');
let songAlbum = document.getElementById('album');
let songYear = document.getElementById('release_year');

let btnToggle = document.getElementById('toggle');
let btnNext = document.getElementById('next');
let btnPrev = document.getElementById('previous');
let btnVolume = document.getElementById('volume_button');
let volumeBar = document.getElementById('volume_bar');

/*YT-api*/
let tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt_video', {
origin: 'https://dorianbay.neocities.org/',
playerVars: {
'playsinline': 1,
'controls': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady(event) {
setSongInfo(i);
}

function onPlayerStateChange() {
//work-in-progress
}

function setSongInfo(i) {
player.loadVideoByUrl(songs[i].url);
songTitle.textContent = songs[i].title;
songArtist.textContent = 'Artist: ' + songs[i].artist;
songAlbum.textContent = 'Album: ' + songs[i].album;
songYear.textContent = 'Year of release: ' + songs[i].year;

//videoLength is currently 0
let videoLength = player.getDuration();
document.getElementById('song_finish').innerHTML = videoLength;
}

function previousSong() {
i--;
if(i < 0) {
i = songsLength - 1;
}
setSongInfo(i);
}

function nextSong() {
i++;
if (i >= songsLength) {
i = 0;
}
setSongInfo(i);

}

songTitle.textContent = songs[0].title;
songArtist.textContent = 'Artist: ' + songs[0].artist;
songAlbum.textContent = 'Album: ' + songs[0].album;
songYear.textContent = 'Year of release: ' + songs[0].year;

btnPrev.addEventListener('click', previousSong);
btnNext.addEventListener('click', nextSong);

Und hier ist der HTML- und CSS-Code:

Code: Select all

YouTube Player









#mp3_purple, h1, button {

color: var(--dark_purple);

}

#mp3_purple {

display: grid;
grid-template-columns: 1fr 1fr;
background-color: var(--white);
width: 850px;
height: 350px;
border: 0.3em solid var(--dark_purple);
padding-left: 1em;

}

section:nth-child(2) {

display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
gap: 0.5em;

}

#yt_video {

width: 100%;
height: 65%;

}

#info span {

display: block;
text-align: center;

}

h1 {

margin-left: 0;
text-shadow: none;
-webkit-text-stroke: 0;
text-align: left;

}

#listened {

width: 80%;

}

#time_indic {

display: flex;
flex-flow: row nowrap;
justify-content: space-between;

}

#listened progress {

width: 100%;

}

progress {

height: 5px;
border-radius: 0;

}

button {

background: none;
border: none;

}

h1, button {

font-size: 2em;

}

#volume {

align-self: flex-start;
padding-left: 2em;
display: flex;
flex-flow: row nowrap;
align-items: center;

}

#volume button, #volume_bar {

font-size: 0.6em;

}







Song title




Artist:
Album:
Year of release:



00:00
00:00



⏮
▶
⏭

🔈