как остановить проигрыш музыки по клику

Question

Пробовал ставить autoplay и document.querySelector('audio').pause() Почему не работает autoplay? Как сделать, чтоб музыка была в autoplay, не на полную громкость и при нажатии на кнопку паузилась?

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('audio').play()
})

<button>Play</button>

<audio autoplay="autoplay">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.ogg" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Answer 1

autoplay должен работать, непонятно... На краний вариант просто автоматом запускайте ваше аудио через метод play. А чтобы переключать состояние видео (играет / на паузе), достаточно проверять на паузе ли видео/аудио. Громкость можно менять через audio.volume (используйте числа между 1 и 0, примерно так: 0.50, в данном случае это 50% громкости).

let audio = document.querySelector('audio')

audio.volume = 0.75

document.querySelector('button').addEventListener('click', () => {

  audio.paused
    ? audio.play()
    : audio.pause()
})

<button>Play</button>

<audio autoplay>
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.ogg" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Вот вариант для автоматического запуска без autoplay:

let audio = document.querySelector('audio')

audio.play() // Просто сразу запускаем аудио вне события клика.

// audio.autoplay = true // Но если сильно хочется то автоплей можно применить и так

audio.volume = 0.75

document.querySelector('button').addEventListener('click', () => {

  audio.paused
    ? audio.play()
    : audio.pause()
})

<button>Play</button>

<audio>
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.ogg" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Answer 2

Уже не один год разработчики браузеров делают всё для того, чтобы autoplay не работал до тех пор, пока пользователь хоть что-то не сделает на странице. Уже очень много об этом говорилось и на мой взгляд самая эффективную замену autoplay можно сделать так:

document.onpointerover =_=> audio.play();

Т. е., человек после обновления страницы заводит курсор на страницу и в этот момент начинает звучать музыка, и при этом кажется, что она идёт автоматом.

Ещё альтернативный вариант запускать музыку во время прокрутки, но мне кажется, что первый вариант лучше.

БЛОГ НА HUSL

как остановить проигрыш музыки по клику

Ответы (2 шт):