Почему аудио не воспроизводится в JavaScript - PullRequest
Новая
       24

Почему аудио не воспроизводится в JavaScript

0 голосов
/ 31 декабря 2018

Я хочу добавить фоновую музыку на свой сайт.Я пробовал этот код JS: 

var sound;
function initialAudio() {
    'use strict';
    sound = new Audio();
    sound.src = '../audio/test.mp3';
    sound.loop = true;
    sound.play();
}
window.addEventListener("load", initialAudio);

Я связал JS и HTML, но когда я открываю сайт, звук не воспроизводится.Можете ли вы помочь мне?

Ответы [ 3 ]

0 голосов
/ 31 декабря 2018

Просто используйте звуковой элемент HTML5 с атрибутом автоматического воспроизведения.Как уже упоминалось в комментариях, поддержка браузером autoplay незначительна (по уважительной причине), но у меня работает в Firefox. 

<audio autoplay loop>
  <source src="http://soundbible.com/grab.php?id=464&type=wav"></source>
</audio>

Если вы хотите, чтобы пользователь мог приостанавливать звук, просто добавьте атрибут controls: 

<audio autoplay controls loop>
  <source src="http://soundbible.com/grab.php?id=464&type=wav"></source>
</audio>

Вы также можете использовать JS, чтобы иметь кнопку в другом месте на странице воспроизведения / паузы, как в другом ответе.

0 голосов
/ 01 января 2019

Эта аудио библиотека javascript называется HOWLER.JS , и ее действительно легко использовать.Включите этот файл сценария: 

<script src = "https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.js"></script>

  • Добавьте этот фрагмент кода в ваш HTML: 

    var sound = new Howl({
    src: ['../audio/test.mp3'],
    autoplay: true,
    loop: true,
    volume: 0.5,
});

sound.play();

Для получения дополнительной информации посетите: HOWLER.JS DOCS

0 голосов
/ 31 декабря 2018

Вам нужно использовать аудио элемент в html, вот как это сделать. 

<!DOCTYPE html>
<html>
<body>

<audio id="audioContainer">
  <source src="myMp3.mp3" type="audio/mpeg">
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playMp3()" type="button">Play Mp3</button>
<button onclick="pauseMp3()" type="button">Pause Mp3</button> 

<script>
const audioContainer = document.getElementById("audioContainer"); 

function playMp3() { 
  audioContainer.play(); 
} 

function pauseMp3() { 
  audioContainer.pause(); 
} 
</script>

</body>
</html>
...