У меня есть небольшой сайт, который я использую для запуска паб-викторины. Он использует AJAX на странице output.php для загрузки элементов, которые передаются ему через текстовые файлы. Я использую другую страницу для чтения из БД и извлечения данных для записи в эти текстовые файлы. Я могу показывать и скрывать ответы, отображать изображения, и все это прекрасно работает.
Последнее препятствие, которое я просто не могу преодолеть, - это аудио элементы. Они нормально загружаются на странице вывода. Но если я сначала не нажму кнопку воспроизведения на странице вывода, элементы управления на моей главной странице ничего не сделают. После того, как я нажал кнопку воспроизведения один раз, все работает отлично, я даже могу загрузить новые аудиоклипы. Однако, если страница вывода обновляется, мне снова нужно вручную нажать кнопку воспроизведения. Поскольку выходная страница предназначена для просмотра на телевизоре, это немного мучительно.
Есть ли что-то, чего мне не хватает, что позволит авторизовать аудиоплеер без необходимости ручного щелчка?
Я пробовал автозапуск и фокусировку элемента с помощью команды javascript. Мне всегда нужно нажимать кнопку воспроизведения вручную при первой загрузке страниц.
Тестовая версия, которую я имею ниже, читает из 2 текстовых файлов. audiofile.txt содержит URL-адрес для воспроизведения mp3 (этот файл пуст, когда я не хочу аудио или в режиме остановки), а audiocontrol.txt содержит командубыть отправленным игроку (либо воспроизведение, либо пауза).
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function updatepage(){
$.ajax({
url: 'audiofile.txt',
ifModified: true, success: function(result, status){
if (status === 'success'){
$('#audioplayer').attr('src', result);
}
}
});
$.ajax({
url: 'audiocontrol.txt',
ifModified: true, success: function(result, status){
if (status === 'success'){
$('#audioplayer').trigger(result);
}
}
});
setTimeout('updatepage()',1000);
};
</script>
<script type="text/javascript">
$(document).ready(function(){updatepage();});
</script>
</head>
<body>
<audio id='audioplayer' controls>
<source id='audiosource' src=''>
</audio>
</body>
</html>