Почему Safari или Firefox не могут обрабатывать аудиоданные из MediaElementSource?

Ни Safari, ни Firefox не могут обрабатывать аудиоданные с MediaElementSource с помощью API веб-аудио.

var audioContext, audioProcess, audioSource,
    result = document.createElement('h3'),
    output = document.createElement('span'),
    mp3 = '//www.jonathancoulton.com/wp-content/uploads/encodes/Smoking_Monkey/mp3/09_First_of_May_mp3_3a69021.mp3',
    ogg = '//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg',
    gotData = false, data, audio = new Audio();
 
function connect() {
  audioContext = window.AudioContext ? new AudioContext() : new webkitAudioContext(),
  audioSource  = audioContext.createMediaElementSource( audio ),
  audioScript  = audioContext.createScriptProcessor( 2048 );
 
  audioSource.connect( audioScript );
  audioSource.connect( audioContext.destination );
  audioScript.connect( audioContext.destination );
  audioScript.addEventListener('audioprocess', function(e){
    if ((data = e.inputBuffer.getChannelData(0)[0]*3)) {
      output.innerHTML = Math.abs(data).toFixed(3);
      if (!gotData) gotData = true;
    }
  }, false);
}
 
(function setup(){
  audio.volume = 1/3;
  audio.controls = true;
  audio.autoplay = true;
  audio.src = audio.canPlayType('audio/mpeg') ? mp3 : ogg;
  audio.addEventListener('canplay', connect);
  result.innerHTML = 'Channel Data: ';
  output.innerHTML = '0.000';
  document.body.appendChild(result).appendChild(output);
  document.body.appendChild(audio);
})();

Ответы

Ответ 1

Этот ответ цитируется почти точно из моего ответа на связанный с ним вопрос: Firefox 25 и AudioContext createJavaScriptNote не функция

Firefox поддерживает MediaElementSource, если носитель придерживается Политика одинакового происхождения, однако при попытке для использования носителей с удаленного источника.

Спецификация на самом деле не связана с ней (каламбур) но мне сказали, что это предполагаемое поведение, и проблема на самом деле связана с Chrome... Это реализация Blink (Chrome, Opera), что необходимо обновить, чтобы потребовать CORS.

MediaElementSource Node и медиа-ресурсы Cross-Origin:

From: Robert O'Callahan <[email protected]>
Date: Tue, 23 Jul 2013 16:30:00 +1200
To: "[email protected]" <[email protected]>

Элементы мультимедиа HTML могут воспроизводить медиаресурсы из любого источника. Когда элемент воспроизводит медиа-ресурс от источника, отличного от происхождение, мы должны предотвратить страницу script от возможности читать содержимое (например, извлечение видеокадров или аудиокассет). В частности, мы должно препятствовать доступу ScriptProcessorNodes к аудио. Мы также должны получить информацию о протекании проб в других способы (например, атаки временного канала). В настоящее время спецификация Web Audio ничего об этом.

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

Мое предложение состоит в том, чтобы преобразовать данные MediaElementAudioSourceNode из один и тот же исходный поток для молчания.

Если это предложение сделает это в спецификации, разработчику будет почти невозможно понять, почему его MediaElementSource не работает. Поскольку он стоит прямо сейчас, называя createMediaElementSource() элементом <audio> в Firefox 26 фактически останавливает элементы управления <audio> из работает на всех и не выдает ошибок.

Какие опасные вещи вы можете сделать с аудио/видео данными из удаленного источника? Общая идея заключается в том, что без применения политики "один и тот же исходный код" к MediaElementSource node, некоторые вредоносные javascript могут получить доступ к материалам, к которым должен иметь доступ только пользователь (сеанс, vpn, локальный сервер, сетевые диски) и отправлять его содержимое Или некоторое его представление - злоумышленнику.

Элементы мультимедиа HTML5 по умолчанию не имеют этих ограничений. Вы можете включить удаленный носитель во всех браузерах с помощью элементов <audio>, <img> или <video>. Это только в том случае, если вы хотите манипулировать или извлекать данные из этих удаленных ресурсов, которые вступают в игру в политику одинакового происхождения.

[Это] по той же причине, что вы не можете сбрасывать перекрестное происхождение данных изображения через <canvas>: носитель может содержать конфиденциальную информацию и, следовательно, разрешить удаленные сайты перенаправлять и перенаправлять контент, является проблемой безопасности. - @nmaier

Ответ 2

createMediaElementSource() не работает должным образом в Safari 8.0.5 (и, возможно, раньше), но исправлен в Webkit Nightly начиная с 10600.5.17, r183978