hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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 .

Étape 1. Créez le code HTML

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 .

20 idées inspirantes pour la vie à la maison minimale

20 idées inspirantes pour la vie à la maison minimale

L'idée commune que la plupart d'entre nous avons quand il s'agit d'espace de vie est que nous en manquons rapidement. Le loyer et le loyer coûtent cher dans les régions où les possibilités sont vastes et pourtant, il y a des gens très créatifs qui ont pris l' avance et qui ont pris le peu d'espace dont ils disposaient pour en tirer le meilleur parti .Nous p

(Conseils techniques et de conception)

19 gadgets de domotique que vous devriez savoir

19 gadgets de domotique que vous devriez savoir

Vous cherchez une idée de cadeau pour vos amis et les membres de la famille tech-savvy? Qu'en est-il des gadgets de domotique intelligents basés sur l'IdO? De tels gadgets futuristes facilitent la vie des gens, permettent un divertissement permanent et aident à automatiser les tâches ménagères .Ce n&

(Conseils techniques et de conception)