Comment diffuser de l'audio tronqué à l'aide de l'API MediaSource

Avec l' API MediaSource, vous pouvez générer et configurer des flux de médias directement dans le navigateur. Il vous permet d' effectuer une variété d'opérations sur des données multimédias détenues par des balises HTML liées aux médias telles que

Dans cet article, nous verrons plus particulièrement comment diffuser un échantillon audio (un fichier MP3 tronqué) avec l' API MediaSource directement dans le navigateur afin de pré-diffuser de la musique à votre public. Nous verrons comment détecter la prise en charge de l'API, comment connecter l'élément média HTML à l'API, comment récupérer le média via Ajax et enfin comment le diffuser .

Si vous voulez voir à l'avance ce que nous faisons, jetez un oeil au code source sur Github, ou consultez la page de démonstration .

Pour créer le code HTML, ajoutez un

Étape 2. Détecter le support du navigateur

En JavaScript, créez un bloc try…catch qui enverra une erreur si l' API MediaSource n'est pas supportée par le navigateur de l'utilisateur, ou, en d'autres termes, si MediaSource (la clé) n'existe pas dans l'objet window .

 try {if (! 'MediaSource' dans la fenêtre) lance une nouvelle ReferenceError ('Il n'y a pas de propriété MediaSource dans l'objet window.'}} catch (e) {console.log (e); } 

Étape 3. Détection du support MIME

Après la vérification du support, vérifiez également la prise en charge du type MIME . Si le type MIME du média que vous souhaitez diffuser n'est pas pris en charge par le navigateur, alertez l'utilisateur et lancez une erreur .

 var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) {alert ('Impossible de lire le média Le type de média MIME' + mime + 'n'est pas supporté.'); throw ('Media of type' + mime + 'n'est pas supporté.'); } 

Notez que l'extrait de code ci-dessus doit être placé à l'intérieur du bloc try, avant le bloc catch (pour référence, suivez la numérotation des lignes ou consultez le fichier JS final sur Github).

Étape 4. Lier le

Créez un nouvel objet MediaSource et attribuez-le en tant que source de

 var audio = document.querySelector ('audio'), mediaSource = nouveau MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

Étape 5. Ajouter un objet MediaSource à MediaSource

Lorsqu'un élément de média HTML accède à une source de média et est prêt à créer des objets SourceBuffer, l'API MediaSource déclenche un événement sourceopen .

L'objet SourceBuffer contient un SourceBuffer de média qui est éventuellement décodé, traité et lu. Un seul objet MediaSource peut avoir plusieurs objets SourceBuffer .

Dans le gestionnaire d'événements de l'événement sourceopen, ajoutez un objet MediaSource à MediaSource avec la méthode addSourceBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime);}); 

Étape 6. Récupérez les médias

Maintenant que vous avez un objet SourceBuffer, il est temps d' aller chercher le fichier MP3 . Dans notre exemple, nous le ferons en utilisant une requête AJAX .

Utilisez arraybuffer comme responseType, qui dénote des données binaires . Lorsque la réponse est récupérée avec succès, ajoutez-la à SourceBuffer avec la méthode appendBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = ce.addSourceBuffer (mime); var xhr = nouveau XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {cas 200: sourceBuffer.appendBuffer (this.réponse); break; case 404: throw 'Fichier non trouvé'; défaut: throw 'Échec de la récupération du fichier fichier ';}} catch (e) {console.error (e);}}; xhr.send ();}); 

Étape 7. Indiquez la fin du flux

Lorsque l'API a terminé d'ajouter les données à SourceBuffer un événement appelé updatend est déclenché . Dans un gestionnaire d'événements, appelez la méthode endOfStream() de MediaSource pour indiquer que le flux est terminé .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = ce.addSourceBuffer (mime); var xhr = nouveau XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () {try {switch (this.status) {cas 200: sourceBuffer.appendBuffer (this.réponse); sourceBuffer.addEventListener ('updateend', fonction (_) {mediaSource.endOfStream ();} ); break; case 404: throw 'Fichier non trouvé'; défaut: throw 'Echec de récupération du fichier'}} catch (e) {console.error (e);}}; xhr.send ();}) ; 

Étape 8. Tronquer le fichier multimédia

L'objet SourceBuffer possède deux propriétés appelées appendWindowStart et appendWindowEnd représentant l' heure de début et de fin des données de média que vous souhaitez filtrer. Le code en surbrillance ci-dessous filtre les quatre premières secondes du MP3.

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; ...}); 

Démo

Et c'est tout, notre échantillon audio est diffusé directement à partir de la page Web. Pour le code source, jetez un coup d'oeil à notre repo Github et pour le résultat final, consultez la page de démonstration .

Support du navigateur

Au moment d'écrire ce post, l'API MediaSource est officiellement supportée dans tous les principaux navigateurs. Mais les tests montrent que l' implémentation est buggée dans Firefox, et les navigateurs Webkit ont toujours des problèmes avec la propriété appendWindowStart .

Comme l'API MediaSource est encore à l'état expérimental, l'accès à des fonctions d'édition supérieures peut être limité, mais la fonction de diffusion de base est quelque chose que vous pouvez utiliser immédiatement .

Développement Android plus facile avec RoboGuice

RoboGuice est un framework incontournable qui apporte la simplicité et la facilité de l'injection de dépendance à Android. Guice est un framework d'injection de dépendance léger pour la plate-forme Java. L'injection de dépendance est un modèle de conception avec le principe de base du comportement de séparation de la résolution de dépendance .Il permet

(Conseils techniques et de conception)

Comment l'analyse des données volumineuses rend les villes plus intelligentes

Les idées novatrices gagnent toujours en popularité et ne peuvent être refusées à mesure qu'elles se développent à travers les pays et éventuellement le monde. Le processus d'aller de l'avant illustre la survie de l'humanité, même si les technologies récentes ont radicalement changé nos méthodes de progression .Aujourd'

(Conseils techniques et de conception)