Блог

Главная - Вопросы по программированию - Установка воспроизведения / паузы html-аудио на основе файла cookie (работает только при паузе, но не при воспроизведении)

Установка воспроизведения / паузы html-аудио на основе файла cookie (работает только при паузе, но не при воспроизведении)

#javascript #cookies

#javascript #файлы cookie

Вопрос:

Я пытаюсь заставить фоновый звук запоминать состояние воспроизведения / паузы. Я добился приостановки и сохранения состояния паузы в файле cookie, поэтому, когда я перехожу между первой и второй страницами, он остается приостановленным (по сравнению с автозапуском изначально на обеих страницах), но когда я нажимаю play после этого и обновляю страницу, даже если файл cookie меняется на «false» в инспекторезвук не воспроизводится, а цвет div не меняется на зеленый.

Живая демонстрация https://timcliss.webflow.io/audio-test

Codepen

Вот код

Внешние скрипты

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>

HTML

 <div class="div" id="toggle"> PLAY/PAUSE </div>
<audio id="player" src="https://storage.yandexcloud.net/timcliss/About.mp3" autoplay loop>

CSS

 .div {
background-color:green;
height: 50px;
color: white;
text-align: center;
}

JS

 var audio = $('#player')[0];
audio.volume = 0.5;

var isMuted = Cookies.get('playerMuted'); // Receive stored cookie
if(isMuted) // If muted, stop the player
{
$('#player')[0].pause();
$('#toggle').css({'background-color': 'red'});
} 
else
{
$('#player')[0].play();
$('#toggle').css({'background-color': 'green'});
}

// This function will be called when you click the toggle div
function toggleMute() 
{
if(isMuted) // If player is muted, then unmute it
{
$('#player')[0].play();
$('#toggle').css({'background-color': 'green'});
isMuted = false;
} else // Else mute it
{
$('#player')[0].pause();
$('#toggle').css({'background-color': 'red'});
isMuted = true;
}
Cookies.set('playerMuted', isMuted); // Save current state of player
}

$('#toggle').click(toggleMute);

Ответ №1:

В новых браузерах автозапуск звука не поддерживается, и пользователь должен явно воспроизводить аудио, поэтому часть воспроизведения не работает. Подробнее об этом можно прочитать здесь (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes ).

Комментарии:

1. К сожалению, этот ответ неверен. Он уже воспроизводится автоматически с самого начала в Chrome без взаимодействия с пользователем, поэтому я не понимаю, почему этого не произошло после установки файла cookie. Кроме того, цвет div также не меняется, поэтому кажется, что есть проблема с if / else , но я не могу понять это.

2. вы уверены, что ваш код достигает части else. (попробуйте поставить консоль. инструкция журнала в нем) также я уверен, что вы, возможно, обратили на это внимание, но цвет фона вашего div уже зеленый попробуйте изменить его на какой-либо другой цвет, и если это работает так же хорошо, вы можете быть уверены, что audio.play() не работает

Ответ №2:

Решаемая, оказывается, мне просто нужно было использовать

 if(isMuted=='true')

и затем isMuted = 'false'; or isMuted = 'true';

Вот обновленный pen

Работает как часы в Chrome с включенным автозапуском! 🙂

Safari более строг с автозапуском, поэтому я добавил проверку и запускаю этот код только для Chrome и запускаю стандартный проигрыватель для Safari

 var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if(isSafari){ 
alert('Is safari');
//Do something

} else {
alert('Is other browser');
// Do something
}

Если кто-нибудь найдет обходной путь для автозапуска в Safari или если вам нужна помощь в его реализации в Chrome, пожалуйста, дайте мне знать!