Автозапуск звука в Chrome / Safari при наведении 2018 2019? - PullRequest
Новая
       31

Автозапуск звука в Chrome / Safari при наведении 2018 2019?

0 голосов
/ 26 февраля 2019

Мне интересно, есть ли какой-нибудь способ преодолеть новую политику автозапуска от Google.

Я хочу воспроизвести короткий звуковой фрагмент при наведении ссылки, которая, к сожалению, работает только в Firefox, а не в Chrome и Safari.Есть ли способ обойти эту проблему?

Наверное, нет, наверное, просто подумал, чтобы ответить на этот вопрос более образованным людям в этой области.Может быть, у кого-то есть идея.:)

То есть код, который работает в Firefox и используется также в Chrome и Safari - но не сейчас.

html 

<span class="hit hitme">Just hit me up!</span>

<audio id="HitMe">
    <source src="sound/hitmeup.mp3">
</audio>

jquery 

var audio = $("#HitMe")[0];
$(".hitme").mouseenter(function() {
  audio.play()
$(".hitme").mouseleave(function() {
  audio.pause();
}); 
});

1 Ответ

0 голосов
/ 27 февраля 2019

Ваш вопрос короткий, но на самом деле нужно сказать много вещей.

Во-первых, всегда приятно использовать VanillaJS ™ вместо jQuery, когда речь идет об изменениях политики, потому чтоСтандарты немедленно распространяются на обычный JavaScript, тогда как для распространения изменения требуется сторонние библиотеки, такие как jQuery.Хорошая вещь с простым JavaScript состоит в том, что вы можете создать аудиообъект с new Audio(<source>) - не нужно никаких HTML-элементов!Ниже приведен пример: 

const audio = new Audio("https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3");

// wait for the DOM to load
window.onload = () => {

  // play audio on click
  const clickToPlay = document.querySelector('#click-to-play');
  clickToPlay.onclick = () => audio.play();
  
  // play/pause audio on hover
  const hoverToPlay = document.querySelector('#hover-to-play');
  hoverToPlay.onmouseover = () => audio.play();
  hoverToPlay.onmouseout = () => audio.pause();
}
/* just some styling, not useful for the solution */
#click-to-play {
  padding: 1em;
  background-color: steelblue;
}
#click-to-play:hover {
  cursor: pointer;
}
#hover-to-play {
  padding: 1em;
  background-color: lightblue;
}
#hover-to-play:hover {
  cursor: crosshair;
}
<div id="click-to-play">
  Click to play
</div>
<div id="hover-to-play">
  Hover in to play, hover out to pause
</div>

Отлично!За исключением, как вы и предполагали, автозапуска при наведении, который может быть заблокирован обновлением автозапуска 2017 года в Chrome .

Но это не обязательно плохо.Это обновление было сделано для улучшения взаимодействия с пользователем.Если вы пытаетесь найти способы, как обойти это, вы делаете это неправильно;) В обновлении указывается, что автоигра со звуком разрешена, если пользователь взаимодействовал (например, с помощью щелчка) .Поэтому при проектировании своего веб-сайта убедитесь, что пользователь щелкает где-то на вашей странице до появления автозапуска .Вот пример с двумя шагами , нажмите для авторизации, наведите курсор мыши, чтобы воспроизвести опыт пользователя: 

const audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');

window.onload = () => {
  const clickToAuthorize = document.querySelector('#click-to-authorize');
  const hoverToPlay = document.querySelector('#hover-to-play');
  
  clickToAuthorize.onclick = () => {
    hoverToPlay.style.display = 'block';
  }

  hoverToPlay.onmouseover = () => audio.play();
  hoverToPlay.onmouseout = () => audio.pause();
}
#click-to-authorize {
  padding: 1em;
  background-color: steelblue;
}
#click-to-authorize:hover {
  cursor: pointer;
}
#hover-to-play {
  padding: 1em;
  background-color: lightblue;
  display: none;
}
#hover-to-play:hover {
  cursor: crosshair;
}
<div id="click-to-authorize">
  Click if you want to hear a T-Rex roar!
</div>
<div id="hover-to-play">
  Hover to play/pause
</div>
...