Функция getDuration() API Youtube продолжает возвращать 0 или «неопределено». ⇐ Javascript

[Anonymous]

В настоящее время я новичок в JavaScript и хочу создать проигрыватель YouTube для своего личного веб-сайта. Я хочу, чтобы пользователь мог нажать кнопку на плеере и перейти к следующей или предыдущей песне. Я также хочу, чтобы пользователь видел полную продолжительность песни вместе с другими подробностями о ней.
Я пробовал использовать функцию player.getDuration(), которая поставляется с API-интерфейсом YouTube, и присваивать значение переменной videoLength, но независимо от того, что я делаю, возвращаемое значение не определено или равно 0, что является его начальным значением в моем коде. Я считаю, что проблема в том, что проигрыватель получает видео, используя функцию loadVideoByUrl(), вместо того, чтобы я передал идентификатор видео в onYouTubeIframeAPIReady(). Мне хотелось бы иметь URL-адреса видео и другую информацию о песнях в массиве объектов, чтобы можно было продолжать добавлять песни без необходимости создания плейлиста на YouTube.
Вот код JavaScript. Это еще не сделано, но мне хотелось бы разобраться в этом, прежде чем двигаться дальше.
/*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/ ... DytQ-186Y3"
},

{
"title": "Think About It",
"artist": "Bratz",
"album": "Think About It",
"year": 2025,
"url": "https://www.youtube-nocookie.com/embed/ ... eIqR8TCciP"
},

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

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.url);
songTitle.textContent = songs.title;
songArtist.textContent = 'Artist: ' + songs.artist;
songAlbum.textContent = 'Album: ' + songs.album;
songYear.textContent = 'Year of release: ' + songs.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);

А вот код HTML и CSS:





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



⏮
▶
⏭












Подробнее здесь: https://stackoverflow.com/questions/798 ... -undefined