Воспроизведение аудиофайла при загрузке его в Audio web API - PullRequest
Новая
       20

Воспроизведение аудиофайла при загрузке его в Audio web API

0 голосов
/ 21 марта 2019

Итак, я пытаюсь воспроизвести аудиофайл во время его загрузки, проблема, с которой я сталкиваюсь, заключается в том, что аудиоплеер воспроизводит звук, но только после завершения загрузки, вот мой код:

audio tag 

<audio controls preload="all" muted="muted" > </audio>

это мой JS 

var audio = document.querySelector('audio');
var assetURL = 'url/audios/file';
var token = 'Bearer token'
var mimeCodec = 'audio/wav';

var mediaSource = new MediaSource; 
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
function sourceOpen(_) {
    const playPromise = audio.play();
    console.log(this.readyState); 
    var mediaSource = this;
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    fetchAB(assetURL, function (buf) {
        sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            audio.play();
            console.log(mediaSource.readyState); // ended
        });
        sourceBuffer.appendBuffer(buf);
    });
};
function fetchAB(url, cb) {
    console.log(url);
    var xhr = new XMLHttpRequest;
    xhr.open('get', url);
    xhr.setRequestHeader('Authorization', token);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        cb(xhr.response);
    };
    xhr.send();
};

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

Ответы [ 2 ]

1 голос
/ 01 апреля 2019

Вы не можете частично воспроизвести аудиофайл с помощью API Web Audio. Вы должны создать элемент <audio> и установить его src-атрибут для загрузки файла, такой подход позволит вам передавать файл в потоковом режиме. 

const audio = document.createElement('audio');
audio.src = 'file.wav';
audio.play();

Тем не менее, ваш пример показывает, что вы устанавливаете заголовки при загрузке файла, который не будет работать с вышеуказанным подходом, поэтому вы должны избавиться от этого (хотя, кажется, это способ обойти это: Отправить настраиваемый заголовок HTTP-запроса с аудио-тегом HTML5 )

0 голосов
/ 22 марта 2019

Я думаю, вы можете упростить свой код до этого: 

var audio = new Audio('file.wav');

var promise = audio.play();

// Older browsers may not return promise
if (promise)
    promise.catch(function() { 
        // Couldn't play audio for some reason
    });

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

...