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 .

Guide du débutant: Création de pages Web HTML5 / CSS3

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série. HTML5 et CSS3 ont balayé le web en deux ans. Avant eux il y avait beaucoup de sémantique modifiée dans la façon dont les concepteurs de sites Web devraient créer des pages Web, et avec leur arrivée, un grand nombre de supports tels que des médias alternatifs, des balises XML et des attributs d'entrée progressifs pour les concepteurs web. des fonctionn

(Conseils techniques et de conception)

Utilisation et mise en forme de HTML5 Meter [Guide]

Si vous connaissez la barre de progression HTML, qui indique la quantité d'activité effectuée, vous constaterez que l'élément de mesure est similaire à celui-ci - les deux affichent une valeur courante sur une valeur maximale . Mais contrairement à la barre de progression, la barre de mesure ne doit pas être utilisée pour montrer les progrès.Il est ut

(Conseils techniques et de conception)