Firefox WebAudio createMediaElementSource не работает

Я использую API WebAudio с объектом new Audio() в качестве источника. Ниже приводится упрощенная версия того, что я делаю. Однако это не воспроизводит никаких звуков в firefox 25.0.1.

var context;
if(window.webkitAudioContext) {
    context = new webkitAudioContext();
} else {
    context = new AudioContext();
}
var audio = new Audio();

// This file does seem to have CORS Header
audio.src = "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg";

var source;
function onCanPlay() {
    console.log("can play called");
    source = context.createMediaElementSource(audio);
    source.connect(context.destination);
    audio.removeEventListener("canplay", onCanPlay);
    audio.play();
}

if(audio.readyState < 3) {
    audio.addEventListener("canplay", onCanPlay);
} else {
    onCanPlay();
}

jsFiddle: http://jsfiddle.net/7bJUU/

Я прочитал еще один вопрос, который требует createMediaElementSource CORS. В файле в приведенном выше примере, похоже, есть Access-Control-Allow-Origin: *, но он по-прежнему не работает в firefox. Если я запустил тот же пример локально с локальным аудиофайлом, все будет работать нормально.

Не уверен, что это ошибка или я делаю что-то ужасно неправильно. Любая помощь приветствуется.


person z33m    schedule 24.11.2013    source источник
comment
Мне это кажется ошибкой Firefox. Заголовки CORS определенно есть, и код правильный.   -  person Kevin Ennis    schedule 26.11.2013
comment
Это действительно похоже на ошибку bugzilla.mozilla.org/show_bug.cgi?id=937718 < / а>   -  person z33m    schedule 26.11.2013
comment
Хм. Что ж, я думаю, вы, вероятно, можете использовать AJAX в качестве временной меры, поскольку файл OGG имеет заголовок CORS. Удачи.   -  person Kevin Ennis    schedule 26.11.2013
comment
@Kevin У вас есть примеры по этому поводу. Так как же это будет работать? мы загружаем файл через ajax, а затем помещаем его в буферный источник ??   -  person z33m    schedule 07.01.2014
comment
Да, это подойдет: jsbin.com/InAZaREl/1/edit. Чтобы было ясно, обходной путь - просто пропустить Audio() и использовать BufferSourceNode. Но это довольно просто.   -  person Kevin Ennis    schedule 07.01.2014
comment
Спасибо за пример. Но при этом будет загружен весь файл до того, как он начнет воспроизводиться, верно? Я пытаюсь играть длинные песни.   -  person z33m    schedule 07.01.2014
comment
Верный. Перед началом воспроизведения потребуется загрузить и декодировать весь файл.   -  person Kevin Ennis    schedule 07.01.2014
comment
Ненавижу эту ошибку. Я сделал визуализацию звуковой частоты, которая так хорошо работает на webkit. Но не в firefox ... И, конечно же, я хочу транслировать, а не загружать весь файл до того, как смогу его визуализировать ...   -  person vekah    schedule 21.01.2014
comment
Как мы можем заметить, что этот баг исправлен?   -  person vekah    schedule 21.01.2014
comment
@vekah, я думаю, вы можете просто добавить себя в список cc-list на странице bugzilla. В качестве обходного пути вы можете настроить прокси в том же домене, потому что, насколько я проверил, эта ошибка не влияет на файлы из того же источника.   -  person z33m    schedule 21.01.2014


Ответы (1)


Вот почему:

  1. Firefox (протестированный до и после обновления до 41.0.1 по состоянию на 7 октября 2015 г.), похоже, имеет некоторую проблему с небезопасными кросс-доменами на защищенном сокете HTTP. Я обновился до https: на медиа-источнике, поскольку у Викимедиа есть альтернативный протокол TCP 443 с действующим сертификатом, выданным "Wikimedia Foundation, Inc." с 23 июня 2015 г. по 19 февраля 2017 г. от CA "GlobalSign". Находясь в защищенном домене, браузеры также используют защищенные ресурсы.
  2. Элемент Audio DOM и другие элементы, такие как изображение и видео, имеют свойство crossOrigin, которое указывает либо предоставлять учетные данные (файлы cookie), либо нет. Анонимный перекрестный источник указывает, что обмен файлами cookie домена на перекрестный домен не будет, что считается безопасным браузером. Итак, я установил для "audio.crossOrigin" значение "анонимный", прежде чем указывать источник звука.

Я тестировал Firefox (как сказано в первом пункте) и Chrome 45.0.2454.101m, и они работали нормально, поэтому я обновил JSFiddle: https://jsfiddle.net/7bJUU/11/ 7bJUU

person Diego S.    schedule 07.10.2015
comment
Просто замечание для других, что вы также можете использовать атрибут crossorigin в аудиоэлементе напрямую, как <audio crossorigin="anonymous"></audio>. - person Michael Lynch; 14.02.2018