Como transmitir áudio truncado usando a API MediaSource
Com o API do MediaSource, você pode gerar e configurar fluxos de mídia bem no navegador. Ele permite que você executar uma variedade de operações em dados de mídia mantidos por tags HTML relacionadas à mídia, como ou . Por exemplo, você pode misture diferentes fluxos, criar mídia sobreposta, mídia de carga preguiçosa, e editar métricas de mídia tais como alterar o volume ou a frequência.
Neste post, veremos especificamente como transmitir uma amostra de áudio (um arquivo MP3 truncado) com o API do MediaSource bem no navegador, a fim de pré-show de música para o seu público. Nós vamos cobrir como detectar suporte para a API, como conecte o elemento de mídia HTML para a API, como buscar a mídia via Ajax e, finalmente, como transmitir isso.
Se você quiser ver com antecedência o que estamos fazendo, dê uma olhada no código-fonte no Github, ou confira o página de demonstração.
Etapa 1. Crie o HTML
Para criar o HTML, adicione um tag com um controles atributo para sua página. Para compatibilidade com versões anteriores, também adicionar uma mensagem de erro padrão para usuários cujos navegadores não suportam o recurso. Usaremos o JavaScript para ativar / desativar esta mensagem.
Etapa 2. Detectar Suporte ao Navegador
Em JavaScript, crie um tente ... pegar bloco que vai jogar um erro se o API MediaSource não é suportada pelo navegador do usuário ou, com outras palavras, se MediaSource (a chave) não existe no janela objeto.
tente if (! 'MediaSource' na janela) lançar novo ReferenceError ('Não há nenhuma propriedade MediaSource no objeto de janela.') catch (e) console.log (e); Etapa 3. Detectar Suporte MIME
Após a verificação de suporte, verifique também suporte do tipo MIME. Se o tipo MIME da mídia que você deseja transmitir não for suportado pelo navegador, alertar o usuário e jogar um erro.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Não é possível reproduzir a mídia. A mídia do tipo MIME' + mime + 'não é suportada.'); throw ('Mídia do tipo' + mime + 'não é suportado.'); Observe que o snippet de código acima precisa ser colocado dentro do experimentar quadra, antes de o pegar bloco (para referência, siga a numeração de linha ou confira o arquivo JS final no Github).
Etapa 4. Vincule o
Crie um novo MediaSource objeto e atribuí-lo como a fonte do tag usando o URL.createObjectURL () método.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Etapa 5. Adicione um SourceBuffer objeto para MediaSource
Quando um elemento de mídia HTML acessa uma fonte de mídia e está pronto para crio SourceBuffer objetos, a API do MediaSource dispara um fonteopen evento .
o SourceBuffer objeto detém um pedaço de mídia que é eventualmente decodificado, processado e reproduzido. Um único MediaSource objeto pode tem múltiplos SourceBuffer objetos.
Dentro de manipulador de eventos do fonteopen evento, adicione um SourceBuffer objeto para MediaSource com o addSourceBuffer () método.
mediaSource.addEventListener ('sourceopen', function () var fonteBuffer = this.addSourceBuffer (mime);); Etapa 6. Busque a Mídia
Agora que você tem um SourceBuffer objeto, é hora de buscar o arquivo MP3. Em nosso exemplo, faremos isso usando um pedido AJAX.
Usar arraybuffer Como responseType, qual denota dados binários. Quando a resposta é obtida com sucesso, anexe-o a SourceBuffer com o appendBuffer () método.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = novo XMLHttpRequest; xhr.open ('GET', 'exemplo.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; caso 404: throw 'Arquivo não encontrado'; padrão: throw 'Falha ao buscar o arquivo '; catch (e) console.error (e);; xhr.send ();); Etapa 7. Indique o final do fluxo
Quando a API terminar de anexar os dados a SourceBuffer a evento chamado atualizar é demitido. Dentro de um manipulador de eventos, ligue para o endOfStream () método de MediaSource para indicar que o fluxo terminou.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = novo XMLHttpRequest; xhr.open ('GET', 'exemplo.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (este.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', função (_) mediaSource.endOfStream (); ); break; case 404: lançar 'Arquivo não encontrado'; padrão: lançar 'Falha ao buscar o arquivo'; catch (e) console.error (e);; xhr.send ();) ; Etapa 8. Truncar o arquivo de mídia
o SourceBuffer objeto tem duas propriedades chamado appendWindowStart e appendWindowEnd representando o hora de início e término dos dados de mídia você deseja filtrar. O código destacado abaixo filtra os primeiros quatro segundos do MP3.
mediaSource.addEventListener ('sourceopen', function () var fonteBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Demonstração
E isso é tudo, nossa amostra de áudio é transmitida direto da página da web. Para o Código fonte, dê uma olhada no nosso Repo Github e para o resultado final, confira página de demonstração.
Suporte de Navegador
Ao escrever este post, o MediaSource A API é oficialmente suportada em todos os principais navegadores. Mas o teste mostra que o implementação é buggy no Firefox, e navegadores Webkit ainda têm problemas com o appendWindowStart propriedade.
Como a API do MediaSource é ainda em fase experimental, o acesso a funções de edição mais altas pode ser limitado, mas o transmissão básica recurso é algo que você pode fazer uso de imediato.
