Webaudio, воспроизвести звук дважды

Я экспериментирую с WebAudio и загружаю звук со следующим кодом javascript.

function playAudio(){
    var audio = document.getElementById('music');
    var audioContext = new webkitAudioContext();
    var analyser = audioContext.createAnalyser();
    var source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    audio.play();
}

Я также хочу проанализировать звук, который можно визуализировать с помощью холста, поэтому analyser. В первый раз он работает нормально, но если я запускаю эту функцию дважды, я получаю сообщение об ошибке.

> playAudio(); // works fine, i can hear a sound
> playAudio(); // error 
InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': invalid HTMLMediaElement.

Что вызывает эту ошибку? Я знаю, что ошибка вызвана этой строкой кода:

var source = audioContext.createMediaElementSource(audio);

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


javascript audio web-audio-api
person cantdutchthis    schedule 19.10.2014    source источник
comment
Какова цель двойного вызова метода PlayAudio?   -  person Raathigesh    schedule 19.10.2014
comment
Наткнулся на эту скрипку во время поиска. jsfiddle.net/ikerr/WcXHK   -  person Raathigesh    schedule 19.10.2014
comment
Я создал небольшое приложение, которое распознает барабанную дробь в аудиофайле. Я хочу визуализировать это, но не зацикливать звук. Идея состоит в том, что пользователь может видеть, что приложение работает при нажатии кнопки воспроизведения аудиоклипа. А также иметь возможность повторить.   -  person cantdutchthis    schedule 19.10.2014

Ответы (1)


arrow_upward
2
arrow_downward

Создавая элемент audio динамически (как показано в этой скрипте, http://jsfiddle.net/ikerr/WcXHK/), мне удалось воспроизвести эту песню несколько раз.

function createAudioElement(urls) {
    var audioElement = document.createElement("audio");

    audioElement.autoplay = true;
    audioElement.loop = false;

    for (var i = 0; i < urls.length; ++i) {
        var typeStr = "audio/" + urls[i].split(".").pop();

        if (audioElement.canPlayType === undefined ||
            audioElement.canPlayType(typeStr).replace(/no/, "")) {
            var sourceElement = document.createElement("source");
            sourceElement.type = typeStr;
            sourceElement.src = urls[i];
            audioElement.appendChild(sourceElement);
            console.log("Using audio asset: " + urls[i]);
        }
    }

    return audioElement;
}

var audioContext = new webkitAudioContext();

function playAudio(){

    var audio = createAudioElement(['http://www.soundjay.com/button/button-1.mp3' ]);      

    if(audio){
        var source = audioContext.createMediaElementSource(audio);
        var analyser = audioContext.createAnalyser();
        source.connect(analyser);
        analyser.connect(audioContext.destination);
        audio.play();
    }
}

playAudio(); // works fine, i can hear a sound
playAudio();
//setTimeout(playAudio,2000);

Демонстрация: http://jsfiddle.net/raathigesh/fueg3mk7/10/

person Raathigesh    schedule 19.10.2014