Πώς να επεξεργαστείτε το Stream Audio χρησιμοποιώντας το API του MediaSource
Με το API MediaSource, μπορείς δημιουργούν και ρυθμίζουν τις ροές πολυμέσων ακριβώς στο πρόγραμμα περιήγησης. Σας επιτρέπει να εκτελέστε μια ποικιλία λειτουργιών στα δεδομένα πολυμέσων που διατηρούνται από ετικέτες HTML που σχετίζονται με πολυμέσα, όπως ή . Για παράδειγμα, μπορείτε ανάμειξη διαφορετικών ροών, δημιουργία επικαλυπτόμενων μέσων, τεμπέλης μέσο φόρτωσης, και επεξεργασία μετρήσεων μέσων όπως η αλλαγή της έντασης ή της συχνότητας.
Σε αυτήν την ανάρτηση, θα δούμε συγκεκριμένα πώς να ροή ενός ηχητικού δείγματος (ένα αποκομμένο αρχείο MP3) με το API MediaSource δεξιά στο πρόγραμμα περιήγησης για να μουσική προ-εμφάνισης στο κοινό σας. Θα καλύψουμε πώς να ανίχνευση υποστήριξης για το API, πως να συνδέστε το στοιχείο μέσων HTML στο API, πώς να φέρε τα μέσα μέσω του Ajax, και τελικά πώς ρεύμα.
Αν θέλετε να δείτε εκ των προτέρων τι έχουμε να κάνουμε, ρίξτε μια ματιά στο τον πηγαίο κώδικα στο Github, ή ελέγξτε το σελίδα επίδειξης.
Βήμα 1. Δημιουργήστε το HTML
Για να δημιουργήσετε το HTML, προσθέστε ένα ετικέτα με α ελέγχους Χαρακτηριστικό στη σελίδα σας. Για συμβατότητα προς τα πίσω, επίσης προσθέστε ένα προεπιλεγμένο μήνυμα σφάλματος για χρήστες των οποίων τα προγράμματα περιήγησης δεν υποστηρίζουν τη λειτουργία. Θα χρησιμοποιήσουμε το JavaScript για να ενεργοποιήσετε / απενεργοποιήσετε αυτό το μήνυμα.
Βήμα 2. Εντοπίστε την υποστήριξη του προγράμματος περιήγησης
Στη JavaScript, δημιουργήστε ένα προσπάθησε να πιάσεις μπλοκ που θα ρίξτε ένα λάθος αν το Το API MediaSource δεν υποστηρίζεται από το πρόγραμμα περιήγησης του χρήστη, ή, με άλλα λόγια, εάν MediaSource (το κλειδί) δεν υπάρχει στο παράθυρο αντικείμενο.
δοκιμάστε if (! 'MediaSource' στο παράθυρο) ρίξτε νέο ReferenceError ('Δεν υπάρχει καμία ιδιότητα MediaSource στο αντικείμενο παραθύρου.') catch (e) console.log (e); Βήμα 3. Εντοπισμός υποστήριξης MIME
Μετά τον έλεγχο υποστήριξης, ελέγξτε επίσης το υποστήριξη του τύπου MIME. Εάν ο τύπος MIME του μέσου εκτύπωσης που θέλετε να μεταδώσετε σε ροή δεν υποστηρίζεται από το πρόγραμμα περιήγησης, ειδοποιείστε τον χρήστη και ρίξτε ένα λάθος.
var mime = 'audio / mpeg'. εάν (! MediaSource.isTypeSupported (mime)) alert ('Δεν είναι δυνατή η αναπαραγωγή του μέσου. Δεν υποστηρίζεται το μέσο τύπου MIME' + mime + '). throw ("Μέσο του τύπου" + mime + "δεν υποστηρίζεται. '); Λάβετε υπόψη ότι το απόσπασμα κώδικα παραπάνω πρέπει να είναι τοποθετημένο μέσα στο προσπαθήστε ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, πριν το σύλληψη block (για αναφορά, ακολουθήστε την αρίθμηση γραμμών ή δείτε το τελικό αρχείο JS στο Github).
Βήμα 4. Συνδέστε το
Δημιούργησε ένα νέο MediaSource αντικείμενο, και την εκχωρήσετε ως την πηγή του ετικέτα χρησιμοποιώντας το URL.createObjectURL () μέθοδος.
var audio = document.querySelector ('ήχος'), mediaSource = νέο MediaSource (); audio.src = URL.createObjectURL (mediaSource). Βήμα 5. Προσθέστε ένα SourceBuffer διαμαρτύρομαι MediaSource
Όταν ένα στοιχείο μέσων HTML πρόσβαση σε μια πηγή μέσων και είναι έτοιμο να δημιουργώ SourceBuffer αντικείμενα, το API MediaSource πυρκαγιές α sourceopen Εκδήλωση .
ο SourceBuffer αντικείμενο κρατά ένα κομμάτι μέσων που τελικά αποκωδικοποιείται, επεξεργάζεται και παίζεται. Ενα μονό MediaSource το αντικείμενο μπορεί έχουν πολλαπλές SourceBuffer αντικείμενα.
μεσα στην χειριστής συμβάντων του sourceopen Εκδήλωση, πρόσθεσε ένα SourceBuffer διαμαρτύρομαι MediaSource με το addSourceBuffer () μέθοδος.
mediaSource.addEventListener ('sourceopen', λειτουργία () var sourceBuffer = this.addSourceBuffer (mime);); Βήμα 6. Λήψη του μέσου εκτύπωσης
Τώρα που έχετε ένα SourceBuffer αντικείμενο, ήρθε η ώρα να φέρε το αρχείο MP3. Στο παράδειγμά μας, θα το κάνουμε χρησιμοποιώντας ένα αίτημα AJAX.
Χρήση arraybuffer όπως και answerType, οι οποίες υποδηλώνει δυαδικά δεδομένα. Όταν η απάντηση εξαχθεί με επιτυχία, προσθέστε το SourceBuffer με το appendBuffer () μέθοδος.
mediaSource.addEventListener ( 'sourceopen', λειτουργία () var sourceBuffer = this.addSourceBuffer (μίμος)? var XHR = νέα XMLHttpRequest? xhr.open ( 'GET', 'sample.mp3')? xhr.responseType = 'arraybuffer' ? xhr.onload = λειτουργία () δοκιμάστε διακόπτη (this.status) case 200: sourceBuffer.appendBuffer (this.response)? σπάσει? περιπτώσεις 404: ρίξει 'αρχείο δεν βρέθηκε'? προεπιλογή: ρίξει «Αποτυχία ανάκτησης του αρχείο ') αλίευση (e) console.error (e);; xhr.send (););
Βήμα 7. Υποδείξτε το τέλος του ρεύματος
Όταν το API έχει τελειώσει προσθέτοντας τα δεδομένα σε SourceBuffer ένα εκδήλωση που ονομάζεται updatend απολύθηκε. Μέσα σε ένα χειριστή συμβάντων, καλέστε το endOfStream () μέθοδος για MediaSource προς το δείχνουν ότι η ροή έχει λήξει.
mediaSource.addEventListener ( 'sourceopen', λειτουργία () var sourceBuffer = this.addSourceBuffer (μίμος)? var XHR = νέα XMLHttpRequest? xhr.open ( 'GET', 'sample.mp3')? xhr.responseType = 'arraybuffer' ? xhr.onload = λειτουργία () δοκιμάστε διακόπτη (this.status) case 200: sourceBuffer.appendBuffer (this.response)? sourceBuffer.addEventListener ( 'updateend', λειτουργία (_) mediaSource.endOfStream ()? )? σπάσει? περιπτώσεις 404: ρίξει «αρχείο δεν βρέθηκε»? προεπιλογή: ρίξει «Αποτυχία ανάκτησης του αρχείου»? αλιευμάτων (e) console.error (ε)?? xhr.send ()?) .
Βήμα 8. Μειώστε το αρχείο πολυμέσων
ο SourceBuffer αντικείμενο έχει δύο ιδιότητες που ονομάζεται appendWindowStart και appendWindowEnd που αντιπροσωπεύει το ώρα έναρξης και λήξης των δεδομένων των μέσων θέλετε να φιλτράρετε. Ο επισημασμένος κώδικας παρακάτω φιλτράρει τα πρώτα τέσσερα δευτερόλεπτα του MP3.
mediaSource.addEventListener ( 'sourceopen', λειτουργία () var sourceBuffer = this.addSourceBuffer (μίμος)? sourceBuffer.appendWindowEnd = 4,0? ...)?
Διαδήλωση
Και αυτό είναι το δικό μας το ηχητικό δείγμα μεταδίδεται σε ροή από την ιστοσελίδα. Για το πηγαίου κώδικα, ρίξτε μια ματιά στο δικό μας Github repo και για το τελικό αποτέλεσμα, ελέγξτε το σελίδα επίδειξης.
Υποστήριξη προγράμματος περιήγησης
Από την εγγραφή αυτής της θέσης, το MediaSource Το API υποστηρίζεται επίσημα σε όλα τα μεγάλα προγράμματα περιήγησης. Αλλά οι δοκιμές δείχνουν ότι το η εφαρμογή είναι buggy στον Firefox, και τα προγράμματα περιήγησης Webkit εξακολουθούν να έχουν προβλήματα με το appendWindowStart ιδιοκτησία.
Όπως είναι το API MediaSource ακόμα στο πειραματικό στάδιο, η πρόσβαση σε υψηλότερες λειτουργίες επεξεργασίας μπορεί να είναι περιορισμένη, αλλά η βασική ροή χαρακτηριστικό είναι κάτι που μπορείτε να χρησιμοποιήσετε αμέσως.
