Помогите разобраться! (html+js)
Добрый день!
задача такая: на сайте есть ограниченный аудиоплейер - по сути просто строка с названием трека и кнопка плэй, которая запускает или останавливает трек.
при открытии сайта или при обновлении страницы трек должен рэндомно меняться, соответственно и его название тоже (ну с изменением названия проблем нет, работает).
моя логика: создаю массив, в качестве элементов - ссылки на аудиотреки в папке. элементами массива с помощью setAttribute меняю в source атрибут scr, то есть заменяю первоначально заданный трек на рэндомный.
и вот проблема: ссылка меняется и подставляется новая (проверяла и в консоли, и в просто в инструменстах разработчика: ссылка меняется и соответствующее ей название появляется), НО трек играет тот, что был изначально прописан в html. а если изнанально в src не прописывать ссылку, то вообще не работает.
c js у меня все плохо, не могу понять, что делаю не так, помогите, пожалуйста разобраться.
код такой (ссылки внутренние, конечно, но ничего не поделать)
<div class="music">
<audio tabindex="0" id="player" preload="auto" >
<source id="chooseTrack" src='../audio/piero umiliani - Detective.mp3'>
</audio>
<button id="music-button"><img src='../elements/play-arrow.png' height="25px""></button>
<p id="trackName"></p>
JS:
var button = document.getElementById('music-button')
var arr = ['../audio/Piero Umiliani - Distortion.mp3', '../audio/Piero Umiliani - Detective.mp3', '../audio/Piero Umiliani - Bande Astrale.mp3']
var rand = Math.floor(Math.random() * arr.length)
var player = document.getElementById('player')
var choose = document.getElementById('chooseTrack')
window.onload = function () {
choose.setAttribute('src',arr[rand]);
var name = arr[rand].replace(/^.{9}/, '');
var name1 = name.replace(/.{4}$/, '');
document.getElementById('trackName').innerHTML = "играет:" + name1;
};
button.onclick = function togglePlay() {
return player.paused ? player.play() : player.pause();
};