Πώς να εμφανίσετε την μεταγλωττισμένη ώρα παράλληλα με την αναπαραγωγή ήχου

Η μεταγραφή ήχου είναι η κειμενική έκδοση του λόγου, χρήσιμη για την παροχή χρήσιμων υλικών, όπως ηχογραφημένες διαλέξεις, σεμινάρια κ.λπ. Χρησιμοποιούνται επίσης για την τήρηση αρχείων κειμένου για γεγονότα όπως συνεντεύξεις, ακροάσεις δικαστηρίων και συναντήσεις.

Ο ήχος ομιλίας σε ιστοσελίδες (όπως σε podcasts) συνοδεύεται συνήθως με μεταγραφές, προς όφελος εκείνων που έχουν προβλήματα ακοής ή δεν μπορούν να ακούσουν καθόλου. Αυτοί μπορούν δείτε το κείμενο "αναπαραγωγή" παράλληλα με τον ήχο. Ο καλύτερος τρόπος για να δημιουργήσετε μια μεταγραφή ήχου είναι η χειρωνακτική ερμηνεία και εγγραφή.

Σε αυτή την ανάρτηση, θα δούμε πώς να εμφανίσετε μια τρέχουσα μεταγραφή ήχου παράλληλα με τον ήχο. Για να ξεκινήσετε πρέπει να έχουμε έτοιμο το αντίγραφο. Για αυτήν την ανάρτηση, έχω κατεβάσει ένα δείγμα ήχου και το αντίγραφό του από voxtab.

Χρησιμοποιώ HTML ul για να εμφανίσετε τους διάλογους μιας ιστοσελίδας όπως παρακάτω:

 
 
Τζάστιν: Αυτό που προσπαθώ να πω είναι ότι η έκκληση και ο οικισμός είναι ξεχωριστά.
 
Alistair: Εννοείτε ότι οι επικοινωνίες και οι εσωτερικές και εξωτερικές ανακοινώσεις θα εισαχθούν στη διαδικασία προσφυγής.
 
Τζάστιν: Δικαίωμα, επειδή συνδέονται με την προσφυγή.
... 
 
 

Στη συνέχεια, θέλω να θολώ όλο το διαθέσιμο κείμενο και να απενεργοποιήστε μόνο το διάλογο που αντιστοιχεί στην τρέχουσα ομιλία που αναπαράγεται από την ηχογράφηση. Έτσι, για να αποκλείσετε τους διαλόγους χρησιμοποιώ το φίλτρο CSS "θαμπά".

#transcript> li -webkit-φίλτρο: φίλτρο θολώματος (3px): θαμπά (3px); μετάβαση: όλα ευκολία .8s ...

Για το IE 10+ μπορείτε να προσθέσετε σκιά κειμένου για να δημιουργήσετε μια θολή επίδραση. Μπορείτε να χρησιμοποιήσετε αυτόν τον κώδικα για να ανιχνεύσετε αν έχει εφαρμοστεί η θολότητα CSS ή όχι και να φορτώσετε το συγκεκριμένο φύλλο στυλ IE. Μόλις το κείμενο είναι θολή, πήγα μπροστά και πρόσθεσα λίγο στυλ στη μεταγραφή.

 αν είναι (getComputedStyle (διαλόγους [0]) .webkitFilter === undefined && getComputedStyle (διαλόγους [0]) filter === "κανένα") var headEle = document.querySelector ('head'), linkEle = document.createElement ('Σύνδεσμος'); linkEle.type = 'κείμενο / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Τώρα, ας προσθέσουμε τον ήχο στη σελίδα, με αυτό.

ο ontimeupdate γεγονός της ήχου το στοιχείο εκτοξεύεται κάθε φορά currentTime ενημερώνεται, οπότε θα χρησιμοποιήσουμε αυτό το συμβάν για να ελέγξουμε τον τρέχοντα χρόνο εκτέλεσης του ήχου και να επισημάνουμε τον αντίστοιχο διάλογο στην μεταγραφή. Ας δημιουργήσουμε πρώτα μερικές παγκόσμιες μεταβλητές που θα χρειαστούμε.

διάλογοςΟι ερωτήσεις = [0,4,9,11,18,24,29,31,44,45,47]; διάλογοι = document.querySelectorAll ('# μεταγραφή> li'); transcriptWrapper = document.querySelector ('#expressionWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1. 

διάλογος είναι μια σειρά αριθμών που αντιπροσωπεύουν τα δευτερόλεπτα όταν ξεκινά κάθε διάλογος στην μεταγραφή. Ο πρώτος διάλογος αρχίζει με 0 δευτερόλεπτα, ο δεύτερος με 4 δευτερόλεπτα και ούτω καθεξής. previousDialogueTime θα χρησιμοποιηθεί για την παρακολούθηση αλλαγών διαλόγου.

Ας τελικά προχωρήσουμε στη λειτουργία που συνδέεται με ontimeupdate, που ονομάζεται "playTranscript". Από playTranscript εκτοξεύεται σχεδόν κάθε δευτερόλεπτο ο ήχος παίζει, πρέπει πρώτα να προσδιορίσουμε ποιο διάλογο γίνεται επί του παρόντος. Υποθέστε ότι ο ήχος είναι στο 0:14, τότε παίζει το διάλογο που ξεκίνησε στις 0:11 (ανατρέξτε στο διάλογος array), αν η τρέχουσα ώρα είναι 0:30 στον ήχο τότε είναι ο διάλογος που ξεκίνησε στις 0:29.

Ως εκ τούτου, για να μάθετε πότε ξεκίνησε ο τρέχων διάλογος, πρώτα φιλτράρουμε όλες τις ώρες στο διάλογος που είναι κάτω από την τρέχουσα ώρα του ήχου. Εάν η τρέχουσα ώρα είναι 0:14, φιλτράρουμε όλο το νούμερο. στη συστοιχία που είναι κάτω από 14 (οι οποίες είναι 0, 4, 9 και 11) και βρείτε το μέγιστο αριθμό. από αυτούς, που είναι 11 (έτσι ο διάλογος ξεκίνησε στις 0:11).

συνάρτηση playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (λειτουργία (v) επιστροφή v <= audio.currentTime));  

Μόλις το currentDialogueTime υπολογίζεται, ελέγχεται εάν είναι το ίδιο με το previousDialogueTime(δηλαδή εάν ο διάλογος στον ήχο έχει αλλάξει ή όχι), αν δεν είναι αντιστοιχία (δηλαδή εάν ο διάλογος έχει αλλάξει), τότε currentDialogueTime έχει εκχωρηθεί σε previousDialogueTime.

συνάρτηση playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (λειτουργία (v) επιστροφή v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Τώρα ας χρησιμοποιήσουμε τον δείκτη του currentDialogueTime στο διάλογος για να μάθετε ποιος διάλογος στη λίστα των διαλόγων μεταγραφής πρέπει να επισημανθεί. Για παράδειγμα, αν το currentDialogueTime είναι 11, έπειτα δείκτης 11 στο διάλογος ο πίνακας είναι 3 που σημαίνει ότι πρέπει να τονίσουμε τον διάλογο στο δείκτη 3 στο διαλόγους παράταξη.

συνάρτηση playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (λειτουργία (v) επιστροφή v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Μόλις βρούμε τον διάλογο για να τονίσουμε (δηλαδή το currentDialogue), κύλιση transcriptWrapper (εάν είναι κύλιση) μέχρι currentDialogue είναι 50px κάτω από την κορυφή του περιτυλίγματος, τότε θα βρούμε τον προηγουμένως επισημασμένο διάλογο και θα αφαιρέσουμε την κλάση Ομιλία από αυτό και προσθέστε το currentDialogue.

συνάρτηση playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (λειτουργία (v) επιστροφή v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName('speaking')[0]; if(previousDialogue !== undefined) previousDialogue.className = previousDialogue.className.replace('speaking',"); currentDialogue.className +=' speaking';   

Το στοιχείο με την κλάση Ομιλία θα εμφανίσει αδιαφανή κείμενο.

.ομιλία -webkit-φίλτρο: θόλωμα (0px) φίλτρο: θαμπάδα (0px); 

Και αυτό είναι, εδώ είναι ο πλήρης κώδικας HTML και JS κώδικα.

 
 
Τζάστιν: Αυτό που προσπαθώ να πω είναι ότι η έκκληση και ο οικισμός είναι ξεχωριστά.
 
Alistair: Εννοείτε ότι οι επικοινωνίες και οι εσωτερικές και εξωτερικές ανακοινώσεις θα εισαχθούν στη διαδικασία προσφυγής.
 
Τζάστιν: Δικαίωμα, επειδή συνδέονται με την προσφυγή.
... 
 
 
  
  

Διαδήλωση

Ανατρέξτε στην παρακάτω επίδειξη για να δείτε πώς λειτουργεί, όταν συγκεντρώνονται όλοι οι κωδικοί.