Сначала вы написали
var mediaClip = document.getElementbyId("mediaClip");
Запустив это и просмотрев вывод с консоли Javascript, вы увидите ошибку типа
document.getElementbyId is not a function
Правильная функция имя, которое вы использовали в другом месте в вашем коде, - getElementById, с заглавной буквой «B».
После исправления мы получили новую ошибку:
Cannot read property 'play' of null
Это происходит из строки
document.getElementById('mediaClip').play();
Итак, getElementById вернул сюда null, указывая, что он не смог найти этот элемент. Проблема здесь (в понимании моего непрофессионала; браузерные эксперты могут свободно вмешиваться) в том, что ваш код javascript запустился до того, как браузер завершил сборку документа. Мы не хотим этого, поэтому давайте удостоверимся, что наш код выполняется в соответствующее время:
var mediaClip;
var volume1;
function init()
{
mediaClip = document.getElementById("mediaClip");
volume1 = document.getElementById("volume1");
mediaClip.play();
}
и в HTML:
<body onload="init()">
<audio id="mediaClip" src="A Very Brady Special.mp3" style="display:none" allow="autoplay" controls>
<p>Your browser does not support the audio element</p>
</audio>
<input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='0'>
</body>
И теперь мы В консоли Javascript есть еще одна новая ошибка:
play() failed because the user didn't interact with the document first.
Это ограничение, добавленное браузером, чтобы сайты не давали пользователям ошибок при автоматическом воспроизведении рекламы или надоедливой музыке c. В вашем случае вам нужно добавить код, который запускает музыку c только после того, как пользователь взаимодействует с ползунком громкости.
Однако, так как вы не включили здесь код для «button1», я не могу точно сказать, как это исправить в вашем конкретном документе.