0

Пробовал ставить 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>

2
  • Аттрибут autoplay="true" или просто autoplay.
    – XelaNimed
    20 сен 2022 в 12:10
  • Также стоит упомянуть, что некоторые браузеры запрещают автовоспроизведение в некоторых случаях.
    – XelaNimed
    20 сен 2022 в 12:17

2 ответа 2

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>

6
  • 1
    Дело вкуса, но описание самого переключения я бы предпочел сделать так: audio[audio.paused ? 'play' : 'pause']();. К тому же анализаторы кода, типа JSLint или JSHint, более благосклонные именно к такому синтаксису, особенно если они интегрированны в вашу IDE,
    – Deonis
    18 сен 2022 в 7:51
  • @NNL993 Autoplay все равно почему-то не работет. А через метод play это как? Попробовал к querySelector добавить метод плей, пробовал вынести просто audio.play(). Не выходит
    – nonniks
    18 сен 2022 в 8:38
  • @nonniks странно, ведь вроде у вас метод плей просто работает... У вас какой браузер вообще (Название, версия)?
    – ΝNL993
    18 сен 2022 в 20:22
  • к тому же в настройках браузера может быть запрещено автопроигрывание
    – mymedia
    18 сен 2022 в 20:30
  • проигрывание должно инициироваться пользователем 18 сен 2022 в 20:41
0

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

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.