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

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

в вашем js:

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

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

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

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

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

audioCh1: document.createElement("audio");

и затем в stop ():

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

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

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

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, необходимо также очистить источник и загрузить его обратно. Надеюсь, это поможет.

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

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

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

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

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

//then using it:
stopAudio(audio);

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

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

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

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

audio.stop();

наконец проблема CHROME с "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();
};

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

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

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

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

• 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>

shamangeorge писал:

установив текущее время вручную можно уволить 'canplaythrough' событие на элемент audio.

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

этот подход является "грубой силой", но он работает, предполагая, что использование 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
}

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

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

для меня этот код работает нормально. (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">...

надеюсь, что это поможет.

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

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

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

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

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

this.song = this.songOnDeck;

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

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

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

Примечание: Вы можете заменить функцию стрелки на анонимную функцию для обратной совместимости.