Функция остановки звука HTML5

Ответ 1

вместо stop() вы можете попробовать:

sound.pause();
sound.currentTime = 0;

это должно иметь желаемый эффект

Ответ 2

сначала вам нужно установить идентификатор для вашего аудиоэлемента

в js:

var ply = document.getElementById('player');

var oldSrc = ply.src;//просто чтобы вспомнить старый источник

ply.src = "";//чтобы остановить игрока, вам нужно заменить источник ничем.

Ответ 3

Вот мой способ сделать метод stop():

Где-то в коде:

audioCh1: document.createElement("audio");

а затем в stop():

this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

Таким образом, мы не создаем дополнительный запрос, старый отменяется, и наш аудио-элемент находится в чистом состоянии (тестируется в Chrome и FF): >

Ответ 4

Из моей собственной функции javascript для переключения Play/Pause - поскольку я обрабатываю радиопоток, я хотел, чтобы он очистил буфер, чтобы слушатель не вышел из синхронизации с радиостанцией.

function playStream() {

        var player = document.getElementById('player');

        (player.paused == true) ? toggle(0) : toggle(1);

}

function toggle(state) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = "http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Pause';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Play';
                        player_state = 0;
                        break;
        }
}

Выключается, просто очистка currentTime не разрезает его в Chrome, необходимо очистить источник и загрузить его обратно. Надеюсь, это поможет.

Ответ 5

В качестве дополнительной заметки и потому, что я недавно использовал метод stop, предоставленный в принятом ответе, согласно этой ссылке:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

установив currentTime вручную, можно запустить событие "canplaythrough" на аудиоэлементе. В ссылке упоминается Firefox, но я столкнулся с этим запуском события после установки currentTime вручную в Chrome. Поэтому, если у вас есть поведение, связанное с этим событием, вы можете оказаться в аудиокоде.

Ответ 6

shamangeorge писал (а):

установив currentTime вручную, можно запустить событие "canplaythrough" на аудиоэлементе.

Это действительно то, что произойдет, и приостановка также вызовет событие pause, оба из которых делают этот метод непригодным для использования в качестве метода "остановки". Более того, установка src, как было предложено zaki, заставит игрока попытаться загрузить текущий URL-адрес страницы в качестве медиафайла (и выйти из строя), если включена autoplay - установка src на null не разрешена; он всегда будет рассматриваться как URL-адрес. Короче, чем уничтожить объект игрока, кажется, нет хорошего способа обеспечить метод "остановки", поэтому я бы предложил просто отбросить выделенную кнопку остановки и предоставить паузу и пропустить назад кнопки вместо этого - кнопка останова на самом деле не добавит никакой функции.

Ответ 7

Этот метод работает:

audio.pause();
audio.currentTime = 0;

Но если вы не хотите писать эти две строки кода каждый раз, когда вы останавливаете аудио, вы можете сделать одну из двух вещей. Второй, который я считаю более подходящим, и я не уверен, почему "боги стандартов javascript" не сделали этого стандарта.

Первый метод: создать функцию и передать аудио

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

Второй метод (предпочтительный): расширение класса Audio:

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
};

У меня есть это в файле javascript, который я назвал "AudioPlus.js", который я включаю в свой html перед любым script, который будет иметь дело с аудио.

Затем вы можете вызвать функцию остановки на звуковых объектах:

audio.stop();

ВЫЯВЛЕННЫЙ ХРОМ ВОПРОС С "canplaythrough":

Я не тестировал это во всех браузерах, но это проблема, с которой я столкнулся в Chrome. Если вы попытаетесь установить currentTime на аудио, к которому подключен прослушиватель событий canplaythrough, вы снова активируете это событие, что может привести к нежелательным результатам.

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

//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
    $(this).off("canplaythrough");

    // rest of the code ...
});

БОНУС:

Обратите внимание, что вы можете добавить еще более настраиваемые методы в класс Audio (или любой собственный класс javascript, если на то пошло).

Например, если вы хотите использовать метод перезапуска, который перезапустил звук, он мог бы выглядеть примерно так:

Audio.prototype.restart= function() {
    this.pause();
    this.currentTime = 0;
    this.play();
};

Ответ 8

У меня была такая же проблема. Стоп должен остановить поток, и онлайновое воспроизведение будет жить, если это радио. Все решения, которые я видел, имели недостаток:

• player.currentTime = 0 продолжает загрузку потока.
• player.src = '' событие error

Мое решение:

var player = document.getElementById('radio');
player.pause();
player.src = player.src;

И HTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>

Ответ 9

Этот подход является "грубой силой", но он работает, предполагая, что использование jQuery "разрешено". Оборудуйте свой тэг <audio></audio> с помощью div (здесь с идентификатором "plHolder" ).

<div id="plHolder">
     <audio controls id="player">
     ...
     </audio>
<div>

Затем этот javascript должен работать:

function stopAudio() {
    var savePlayer = $('#plHolder').html(); // Save player code
    $('#player').remove(); // Remove player from DOM
    $('#FlHolder').html(savePlayer); // Restore it
}

Ответ 10

Я считаю, что было бы хорошо проверить, воспроизводится ли аудио состояние и reset свойство currentTime.

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
    sound.currentTime = 0;
}
sound.play();

Ответ 11

для меня этот код работает нормально. (IE10 +)

var Wmp = document.getElementById("MediaPlayer");                
    Wmp.controls.stop();

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

Надеюсь на эту помощь.

Ответ 12

Что мне нравится делать, так это полностью удалить элемент управления с помощью Angular2, после чего он перезагружается, когда следующая песня имеет путь аудио:

<audio id="audioplayer" *ngIf="song?.audio_path">

Затем, когда я хочу выгрузить его в код, я делаю это:

this.song = Object.assign({},this.song,{audio_path: null});

Когда следующая песня назначена, элемент управления полностью воссоздается с нуля:

this.song = this.songOnDeck;

Ответ 13

Простой способ обойти эту ошибку состоит в том, чтобы поймать ошибку.

audioElement.play() возвращает обещание, поэтому следующий код с .catch() должен решить эту проблему:

function playSound(sound) {
  sfx.pause();
  sfx.currentTime = 0;
  sfx.src = sound;
  sfx.play().catch(e => e);
}