Comment diffuser de l'audio tronqué à l'aide de l'API MediaSource
Avec le API MediaSource, vous pouvez générer et configurer des flux multimédia directement dans le navigateur. Cela vous permet de effectuer diverses opérations sur les données de support détenues par des balises HTML liées aux médias telles que ou . Par exemple, vous pouvez mélanger différents flux, créer des médias qui se chevauchent, médias paresseux, et éditer les métriques de média comme changer le volume ou la fréquence.
Dans ce post, nous verrons plus précisément comment diffuser un échantillon audio (un fichier MP3 tronqué) avec le API MediaSource directement dans le navigateur afin de musique pré-spectacle à votre public. Nous allons couvrir comment détecter le support de l'API, comment connecter l'élément multimédia HTML à l'API, comment chercher le média via Ajax, et enfin comment le diffuser.
Si vous voulez voir à l'avance ce que nous faisons, jetez un coup d'œil au code source sur Github, ou consultez le page de démonstration.
Étape 1. Créez le HTML
Pour créer le HTML, ajoutez un tag avec un les contrôles attribut à votre page. Pour la compatibilité ascendante, également ajouter un message d'erreur par défaut pour les utilisateurs dont les navigateurs ne prennent pas en charge cette fonctionnalité. Nous allons utiliser JavaScript pour activer / désactiver ce message.
Étape 2. Détectez le support du navigateur
En JavaScript, créez un essayer… attraper bloquer qui jeter une erreur si la L'API MediaSource n'est pas prise en charge par le navigateur de l'utilisateur, ou avec d'autres mots si MediaSource (la clé) n'existe pas dans le la fenêtre objet.
try if (! 'MediaSource' dans la fenêtre) jette un nouveau ReferenceError ('Il n'y a pas de propriété MediaSource dans l'objet window.') catch (e) console.log (e); Étape 3. Détectez le support MIME
Après la vérification du support, vérifiez également le support du type MIME. Si le type de support MIME que vous souhaitez diffuser n'est pas pris en charge par le navigateur, alerter l'utilisateur et jeter une erreur.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Impossible de lire le support. Le support de type MIME' + mime + 'n'est pas pris en charge.'); throw ('Le média de type' + mime + 'n'est pas pris en charge.'); Notez que l’extrait de code ci-dessus doit être placé à l'intérieur du essayer bloc, avant le capture block (pour référence, suivez la numérotation des lignes ou consultez le fichier JS final sur Github).
Étape 4. Liez le
Créer un nouveau MediaSource objet, et l'assigner comme source du étiquette en utilisant le URL.createObjectURL () méthode.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Étape 5. Ajoutez un SourceBuffer objecter à MediaSource
Lorsqu'un élément multimédia HTML accède à une source multimédia et est prêt à créer SourceBuffer objets, l'API MediaSource tire un sourceopen un événement .
le SourceBuffer objet détient un morceau de médias qui est finalement décodé, traité et joué. Un célibataire ou Individual MediaSource objet peut avoir plusieurs SourceBuffer objets.
À l'intérieur de gestionnaire d'événements du sourceopen un événement, ajouter un SourceBuffer objecter à MediaSource avec le addSourceBuffer () méthode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Étape 6. Récupérer le média
Maintenant que vous avez un SourceBuffer objet, il est temps de récupérer le fichier MP3. Dans notre exemple, nous le ferons par en utilisant une requête AJAX.
Utilisation arraybuffer comme responseType, lequel dénote des données binaires. Lorsque la réponse est extraite avec succès, l'ajouter à SourceBuffer avec le appendBuffer () méthode.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nouveau XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: lancer 'Fichier non trouvé'; défaut: throw 'Impossible de récupérer le 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é mise à jour est viré. Dans un gestionnaire d’événements, appelez le endOfStream () méthode de MediaSource à indique que le flux est terminé.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = nouveau XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', fonction (_) mediaSource.endOfStream (); );; break; case 404: lancer 'Fichier non trouvé'; défaut: throw 'Impossible de récupérer le fichier'; catch (e) console.error (e);; xhr.send ();) ; Étape 8. Tronquer le fichier multimédia
le SourceBuffer objet a deux propriétés appelé appendWindowStart et appendWindowEnd représentant le heure de début et de fin des données multimédia vous voulez 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 l'échantillon audio est diffusé à droite de la page Web. Pour le code source, regardez notre Repo Github et pour le résultat final, consultez le page de démonstration.
Support du navigateur
Au moment d’écrire cet article, le MediaSource L'API est officiellement prise en charge par tous les principaux navigateurs. Mais les tests montrent que le l'implémentation est buggée dans Firefox, et les navigateurs Webkit ont toujours des problèmes avec le appendWindowStart propriété.
Comme l’API MediaSource est encore à son stade expérimental, l'accès à des fonctions d'édition supérieures peut être limité, mais la streaming de base fonctionnalité est quelque chose que vous pouvez utiliser tout de suite.
