2

как сделать чтоб при клике на кнопку проигрывалась мелодия? вот такой вариант есть, но тут при повторном клике мелодия заново идет, а не сбрасывается.Как сделать его?

<a href="#" onclick="new Audio('http://www.html5tutorial.info/media/vincent.mp3').play(); return false;">Play</a>

0

4 ответа 4

3

Чтобы кнопка работала как Play / Pause, надо отслеживать текущее состояние плеера. Оно может быть:

  1. не начинал играть
  2. играет
  3. поставили на паузу
  4. трек доиграл до конца

Ниже топорный пример, где меняется надпись на кнопке, в зависимости от состояния: Play, Playing, Paused, Done:

var el = document.getElementById('btn-play');
var playing = false; // текущее состояние плеера

var player = new Audio('http://www.html5tutorial.info/media/vincent.mp3');
player.preload = "auto";
player.addEventListener('ended', function(){ // слушаем окончание трека
  el.innerText = "Done";
  playing = false;
});
el.addEventListener('click', playPause); // слушаем нажатие на кнопку

function playPause() {
  if( playing) {
    player.pause();
    el.innerText = "Paused";
  } else {
    player.play();
    el.innerText = "Playing..";
  }
  playing = !playing;
}
<link href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button id="btn-play" class="btn btn-success">Play</button>

1

"Прыгаешь" джаваскриптом на объект, который кнопку представляет. Вешаешь на кнопку функцию-обработчик на событие onclick. Вот функция:

function sound() {
	 var audio = new Audio(); // Создаём новый элемент Audio
	 audio.src = '...'; // Указываем путь к звуку "клика"
	 audio.autoplay = true; // Автоматически запускаем
}

1

Как вариант можно использовать тег audio в нем уже встроены элементы контроля.

<audio src="http://www.html5tutorial.info/media/vincent.mp3" controls></audio>

1

Вы просто создаёте несколько объектов и запускаете их. Нужно где то хранить объект текущего воспроизведения и перезаписывать его.

Пример:

var audio = {};

function startAudio(url) {
  if("pause" in audio) audio.pause();

  audio = new Audio(url);
  audio.play();
}
<a href="#" onclick="startAudio('http://goo.gl/UWLwi1'); return false;">Play</a>

5
  • FireFox 48.0 / OS X: повторные нажатия приводят к параллельному запуску копий звука. "Note: An Audio element constructed with new Audio() won't be garbage collected so long as playback is in progress. It will continue playing and be audible until stop() is called or playback finishes."
    – Sergiks
    Commented 11 авг. 2016 в 6:00
  • Имелось в виду audio = audio || new Audio(url);?
    – Qwertiy
    Commented 11 авг. 2016 в 7:17
  • @Mihanik71 А останавливать вы как собираетесь, мне кажется после этого пользователь не вернется на сайт)
    – user192664
    Commented 11 авг. 2016 в 7:31
  • Поправил ответ.
    – Mihanik71
    Commented 11 авг. 2016 в 7:41
  • @NikitaSmith а если человеку просто нужно воспроизвести звук например отправленного изображения. Ответил как понял вопрос
    – Mihanik71
    Commented 11 авг. 2016 в 7:41

Ваш ответ

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

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