Это та часть, которая делает ссылку на первую песню.
<html>
<a href="pelay.html"> Play Song </a>
</html>
Здесь происходит ссылка и автоматически воспроизводит звук после нажатия ссылки.
<html>
<body>
<meta http-equiv="refresh" content="0; url=file:///C:/Users/Mau%20Mao/Music/music/Change.mp3" />
</body>
</html>
Как я могу управлять проигрывателем для воспроизведения следующей песни?
Поскольку меня попросили объяснить скрипку [ОБНОВЛЕНО], я опубликовал в комментариях:
<audio id="player" controls="true" autoplay="true"></audio>
Это элемент аудиоплеера. Это та часть, которая фактически воспроизводит аудио. Он отображается браузером, поэтому может выглядеть по-разному в зависимости от браузера и/или ОС. В Chrome это выглядит так:
Поскольку я добавил атрибут controls
вы можете его увидеть. Если вы должны удалить атрибут управления, вы сможете услышать звук, но не сможете его контролировать. autoplay
сообщает браузеру, чтобы начать воспроизведение аудио, как только он загрузится.
var songs = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
Это определяет новый массив, называемый песнями, который содержит URL-адреса трех песен. Больше можно добавить просто добавив , 'song4.mp3'
к последнему значению.
var index = 0;
Это определяет новую переменную, которая будет содержать номер песни, в которой мы находимся. Это означает, что когда число равно 0
, оно будет воспроизводить первую запись, 1
для второго и т.д. (Массивы начинаются с 0).
function nextSong(){
alert('Triggered');
$('#player').attr('src', songs[index++]);
}
Это создало новую функцию nextSong
, которая при запуске изменит URL-адрес аудиоплеера на следующую песню в массиве. Как именно он выбирает игрока из идентификатора и устанавливает атрибут (attr
) src
(source) в запись в массиве песен с использованием номера индекса, а затем увеличивает индекс на единицу, чтобы в следующий раз он отобразил следующий песня в списке.
$("#player").bind('ended', nextSong);
Здесь он "связывает" ended
событие на аудиоплеере с следующей функцией песни. Это означает, что когда он заканчивает игру (конец песни), тогда она запускает функцию nextSong
которая меняет источник следующей песни и запускает ее снова.
$(document).ready(function(){
nextSong();
});
Все это происходит, когда загружается страница, она запускает функцию nextSong
один раз, чтобы вручную запустить ее, но, вероятно, не требуется из-за атрибута autoplay
на аудиоплеере.
Я знаю, что есть, вероятно, более эффективные способы сделать это, но я попытался максимально упростить его, чтобы ассер понял код.
audio
элемент HTML5.audio
HTML5, который, по моему мнению, имеет обратный вызов Javascript по окончании песни.