>> SAM ΠΡΑΣΙΝΟ: Γεια, σε όλους.
Καλώς ήρθατε στο σεμινάριο μας.
Το όνομά μου είναι Σαμ.
Χιου Zabriskie: Είμαι Hugh.
SAM ΠΡΑΣΙΝΟ: Και θα πάμε να μιλήσουμε σήμερα σχετικά με JavaScript και το Web Audio API.
Ακριβώς για να ξεκινήσει, αυτό είναι ένα περίγραμμα της ατζέντας μας για το σεμινάριο.
Εμείς πάμε για να ξεκινήσω μιλώντας για γιατί θα πρέπει να ενδιαφέρονται για το Web
Ήχος API, γιατί είναι JavaScript η γλώσσα που χρειάζεστε γι 'αυτό,
και τότε μιλάμε για JavaScript essentials-- έτσι όπως,
μπορείτε να περπατήσετε μέσα από μερικά βασικά στοιχεία της γλώσσας,
και στη συνέχεια να μιλήσουμε για το ήχου API σε υψηλό επίπεδο.
Στη συνέχεια, ο Hugh θα μιλήσουμε για μερικούς από τα στάδια της παραγωγής του ήχου
και στη συνέχεια demo αυτό το φοβερό sequencer έργο έχτισε και να σας δείξουμε τον κωδικό.
Και τότε, θα έχουμε χρόνο για ερωτήσεις στο τέλος για τους ανθρώπους
που ζουν εδώ.
>> Χιου Zabriskie: Cool.
>> SAM ΠΡΑΣΙΝΟ: Cool.
>> Χιου Zabriskie: Cool.
Θα δημιουργήσετε αντίγραφα ασφαλείας.
>> SAM ΠΡΑΣΙΝΟ: Λοιπόν, πρώτα πράγματα πρώτα.
Έτσι, ένα από τα μεγάλα πράγματα σχετικά με το Web Audio API
είναι ότι δεν υπάρχει κανένας που έχει συσταθεί απαιτείται.
Έρχεται ενσωματωμένη σε πιο σύγχρονα προγράμματα περιήγησης,
συμπεριλαμβανομένου του Chrome, Edge, στο σύνολό δέσμη των others-- όλα αυτά
ότι μεγάλα τμήματα του άνθρωποι χρησιμοποιούν σήμερα.
Έτσι, δεν υπάρχει κανένας που έχει συσταθεί, εκτός από απλά να πάρει
ένα web server πηγαίνει, για μπορείτε να ξεκινήσετε εργασίας
για το έργο σας, η οποία είναι μεγάλη.
>> Σας προτείνουμε αρκετά σε μεγάλο βαθμό ότι έχετε εξετάσει
χρησιμοποιώντας το Chrome για JavaScript ανάπτυξη ιστοσελίδων,
μόνο και μόνο επειδή προγραμματιστή εργαλεία είναι πραγματικά ισχυρή.
Ως ένα παράδειγμα του τι ακριβώς εννοούμε λέγοντας ανοίξει JavaScript σας
console-- αν πάτε στο Chrome και θα εξετάσουμε κάθε ιστοσελίδα,
και αριστερό κλικ Επιθεωρήστε Στοιχείο, και στη συνέχεια,
πηγαίνετε σε αυτό το μικρό drop-down εδώ και κάνετε κλικ στο Console,
θα δείτε τι ανοίγει μοιάζει πολύ σαν μια γραμμή εντολών που
μπορεί να δει στο Mac σας, ή στην ταυτότητα.
Και έτσι απλά, μπορούμε Τύπος εντολές εδώ, όπως Clear,
και άλλες εντολές όπως αυτό.
Μπορούμε να δημιουργήσουμε μεταβλητές, όπως θα δούμε αργότερα σε JavaScript.
Και έτσι τίποτα που μπορούμε να κάνουμε σε JavaScript, που μπορούμε να κάνουμε με την κονσόλα,
και αυτό είναι ένα σούπερ βολικό τρόπο για να αρχίσετε να παίζετε γύρω με τα API
και να πάρει άνετα με JavaScript δεξιά από το ρόπαλο.
Δεν έχει οριστεί μέχρι που απαιτούνται, το οποίο είναι πραγματικά ωραίο.
Δροσερός.
Φοβερός.
>> Έτσι, μόνο ένα περισσότερο πράγμα για να προσθέσετε.
Αν έχετε οποιαδήποτε questions-- υπάρχουν πολλοί από εσάς που δεν είναι εδώ ζουν,
διστάσετε να στείλετε email ΕΜΕΙΣ-- αυτά Οι διευθύνσεις ηλεκτρονικού ταχυδρομείου μας.
Αν έχετε απορίες δεν θέλετε να μας ρωτήσετε,
όπως, oh έχω ένα bug στον κώδικα μου, ή κάτι τέτοιο
αυτό είναι λίγο πιο συγκεκριμένος, ίσως Google.
Υπάρχουν πολλοί μεγάλοι πόροι σχετικά με το Web Audio API εκεί έξω.
Είναι πολύ καλά τεκμηριώνονται και αυτό είναι να
που χρησιμοποιείται από έναν τόνο των ανθρώπων σε τη βιομηχανία, και οι άνθρωποι που είναι ακριβώς
κτίριο διασκέδαση πράγματα για τον εαυτό τους.
Έτσι, θα πρέπει να υπάρχει μια πολύ των πόρων εκεί έξω.
Φοβερός.
>> Cool, οπότε γιατί το Web Audio API;
Αυτό το διάγραμμα είναι λίγο μιας εξέλιξης του τρόπου
ήχου στο διαδίκτυο έχει αυξηθεί την πάροδο του χρόνου.
Bgsound ήταν σαν την αρχική ετικέτα HTML ότι ο Internet Explorer που χρησιμοποιείται για να υποστηρίξει.
Επέτρεψε μόνο για πολύ βασικούς ήχους, η λειτουργικότητα δεν ήταν πολύ ισχυρή,
και δεν μπορούσε να κάνει περίπλοκη αλληλουχίας,
ή τον έλεγχο όταν ο ήχος άρχισε και σταμάτησε πολύ δυναμικά.
Έτσι, δεν ήταν ιδιαίτερα καλά αναπτυγμένο.
Στη συνέχεια, μετά από αυτό, το Flash ήρθε along-- η οποία,
Είμαι βέβαιος ότι εσείς είστε όλοι εξοικειωμένοι με Flash-- ίσως όχι πώς λειτουργεί,
αλλά έχετε σίγουρα δει.
Έχετε να ενημερώσετε Flash σας Plug-in, όλα τα τέτοιου είδους πράγματα,
και ότι σίγουρα διεύρυνε το φάσμα της λειτουργικότητας που ήταν διαθέσιμο.
Αλλά κάνει ο χρήστης εγκαταστήσει ένα plug-in είναι σίγουρα
Ένα μειονέκτημα συμπεριλαμβανομένων Flash στην αίτησή σας, σωστά;
Επειδή τότε είστε εξαρτάται από το χρήστης πηγαίνει και να βρει αυτό το plug-in,
και πιθανόν να μετατραπεί μακριά από αυτό το επιπλέον βήμα
θα πρέπει να λάβει για να χρησιμοποιήσετε την εφαρμογή σας.
Και τότε θα μπορούσε να υπάρξει μια ενημέρωση ότι θα σπάσει ολόκληρη την αίτησή σας,
και καταλήγει να είναι ένας εφιάλτης για τον κύριο του έργου, πάρα πολύ.
Έτσι, αυτό ήταν ένα οδόφραγμα.
>> Και στη συνέχεια, μετά από αυτό ήρθε μαζί, η ετικέτα HTML ήχου, η οποία
είναι ένα χαρακτηριστικό γνώρισμα των πιο σύγχρονων HTML-- οποία είναι βέβαιο ότι επέτρεψαν πολλά περισσότερα πράγματα,
αλλά ακόμη και τα πράγματα που θα μπορούσατε να κάνετε εκεί ήταν λίγο περιορίζεται μόνο
ως αποτέλεσμα των πραγμάτων HTML ότι ήταν ικανός.
Έτσι, όταν το JavaScript API, το Web Audio API,
έγινε ένα πρότυπο πρακτική σε όλους τους φυλλομετρητές,
ότι διεύρυνε πραγματικά το σύνολο των ευκαιριών για τους προγραμματιστές
για να πάρει πραγματικά στο κτίριο δροσερά πράγματα για το web.
Για ένα μεγάλο χρονικό διάστημα είχε υπάρξει Ήταν πολύ ισχυρά εργαλεία
για εγγενείς εφαρμογές ήχου, like-- ο καθένας ξέρει το GarageBand,
και τότε προφανώς υπάρχουν περισσότερες επαγγελματικές εφαρμογές ήχου ανάμειξη,
και τέτοιου είδους πράγματα.
Αλλά δεν υπήρχε πραγματικά καλό Cloud-- δεν
Cloud, ναι, υποθέτω Cloud-- web-based πλατφόρμα
ότι θα επιτρέψει στους προγραμματιστές να να δημιουργήσουν εφαρμογές για τους ανθρώπους
να κάνει ανάμειξη ήχου.
Και όπως ο ίδιος θα σας δείξει αργότερα, το Web Audio API
επιτρέπει πραγματικά ισχυρό τα πράγματα να συμβούν πραγματικά απλά,
το οποίο είναι αρκετά δροσερό.
Έτσι, αυτή είναι η εντολή προς το γιατί πρέπει να παρακολουθείτε το υπόλοιπο του σεμιναρίου,
βασικά.
>> Και τώρα, πάω να μιλήσω για μερικοί JavaScript-- μόνο τα βασικά στοιχεία
της γλώσσας, έτσι ώστε να μπορούμε να είμαστε στην ίδια σελίδα
όταν μιλάμε για το API λίγο αργότερα.
Δροσερός.
>> Έτσι, αυτό είναι μια περίληψη.
Ξέχασα αυτή ήταν εδώ.
Ναι.
>> Χιου Zabriskie: Υπάρχουν δύο διαφάνειες εδώ.
>> SAM ΠΡΑΣΙΝΟ: Αυτή είναι η περίληψη μερικών από τους περιορισμούς
των άλλων δεσμευτικών, παλιές μεθόδους.
Και στη συνέχεια, τώρα, έχουμε αυτά τα πράγματα.
Δροσερός.
Φοβερός.
>> Έτσι, το JavaScript πρώτης ανάγκης.
Τα πρώτα πράγματα πρώτα, υπάρχει μια αρκετά σημαντική διαφορά
σε JavaScript έναντι μιας γλώσσα όπως C, με τον τρόπο
ότι οι μεταβλητές που δημιουργούνται.
Έτσι σε C, έχουμε συνηθίσει να έχουν για να πληκτρολογήσετε τις μεταβλητές μας, σωστά;
Και δεν εννοώ τον τύπο όπως πληκτρολογήστε τους, εννοώ τύπου
όπως τους αναθέτουν type-- έννοια όπως, ένας int, float ένα, μια χαρα.
Στην C, ήμασταν πραγματικά χρησιμοποιούνται για την να χρειάζεται να δημιουργήσουμε μια μεταβλητή
και στη συνέχεια να επιμείνουμε σε αυτόν τον τύπο για το Ο συνολικός χρόνος που χρησιμοποιεί το εν λόγω μεταβλητή.
Και αυτό δεν είναι απαραιτήτως χειρότερο, αλλά είναι μάλλον δύσκολο να χρησιμοποιήσετε.
Ένα από τα δροσερά χαρακτηριστικά γνωρίσματα της JavaScript είναι
ότι οι μεταβλητές είναι αυτό που ονομάζεται "δυναμικά δακτυλογραφημένες," η οποία
σημαίνει ότι μπορώ να δημιουργήσει ένα μεταβλητή με την εν λόγω σύνταξη,
varX ισούται 5, για παράδειγμα.
Αυτό που αρχικά δημιουργεί ένας ακέραιος variable--
ακριβώς κάτω από το κουκούλα somewhere-- αλλά εγώ
μπορεί να αλλάξει αυτήν τη μεταβλητή να αναφέρεται σε ένα κορδόνι
χωρίς να κάνει κάτι τέτοιο δημιουργώντας μια νέα μεταβλητή.
Δεν χρειάζεται να ανησυχείτε σχετικά με το είδος αλλαγής.
JavaScript ξέρει ότι ο τύπος του αλλάξει, και αυτό συμβαίνει δυναμικά.
>> Έτσι, υπάρχουν οφέλη και τα μειονεκτήματα σε αυτό,
όπως κάποιος που έχει δουλέψει σε Τη Javascript για μια στιγμή μπορεί να ξέρει.
Υπάρχουν φορές που ίσως κατά λάθος
αλλάξετε τον τύπο μιας μεταβλητής και Δεν χειριστεί αυτό το είδος αλλαγής,
και έπειτα το JavaScript σας μπορεί να crash-- ή εξαίρεση
να πεταχτούν, γιατί θα έχετε την λάθος είδος πότε αναμένετε έναν τύπο.
Δροσερός.
>> Έτσι, scoping-- η οποία είναι παρόμοια, αν θέλουμε θυμούνται τις πρώτες εβδομάδες, κατά τη διάρκεια,
αναφέρεται στο πόσο ορατή μια μεταβλητή είναι και σε ποια περιοχή του κώδικα.
Όλα αυτά φαίνεται πολύ παρόμοια με τον τρόπο που φαίνεται στο C.
Έτσι, οι μεταβλητές scoped γενικά μέσα σε αγκύλες μέσα σε μια συνάρτηση,
και στη συνέχεια υπάρχουν επίσης σε παγκόσμιο επίπεδο-Scoped μεταβλητές που
are-- αν γράψετε μια μεταβλητή εκτός από μια λειτουργία,
θα είναι ορατό στο ολόκληρο το κείμενο.
>> Μία διαφορά μεταξύ JavaScript και Γ ειδικότερα,
είναι ότι αν έχετε δηλώσει μια παγκόσμια μεταβλητή οπουδήποτε σε ένα αρχείο κειμένου
είναι ορατό σε όλες τις λειτουργίες εντός της εν λόγω αρχείο κειμένου.
Αυτό είναι σωστό, έτσι δεν είναι;
>> Χιου Zabriskie: Ναι.
>> SAM ΠΡΑΣΙΝΟ: Έτσι, αυτό είναι επίσης μια μικρή funky λίγο σε σύγκριση με το Γ,
όπου είχαμε πάντα να έχουμε μας ορισμούς μεταβλητών πάνω από τις θέσεις
χρησιμοποιήθηκαν.
Αυτό δεν είναι ένας κανόνας που έχει επιβληθεί πια, έτσι, λίγο διαφορετική.
Και πάλι απλά για να τονίσω και πάλι παγκόσμιο ή τοπικό variables--
πολύ παρόμοια με C. Θα μπορούσατε να έχετε δύο μεταβλητές με το ίδιο όνομα,
και έχει ένα από τα ονόματά τους να επισκιαστεί από μια τοπική μεταβλητή εάν ένα από αυτά
ήταν παγκόσμια.
Έτσι, παρόμοιο είδος προβλήματα που κάποιοι από εσάς
μπορεί να τρέξει σε σε ορισμένες του προβλήματός σας παρουσιάζει μέχρι στιγμής.
Cool, έτσι ώστε να είναι μεταβλητές.
>> Ροή ελέγχου, πράγμα που σημαίνει, όπως, αν-else-- λογική stuff-- και βρόχους.
Έτσι για να αρχίσει με, αυτό είναι ό, τι αν-else δηλώσεις μοιάζουν σε JavaScript.
Η τοποθέτηση των διαφόρων πραγμάτων στις γραμμές δεν είναι σημαντική.
Αυτή είναι μόνο μία από τις συμβάσεις για τον τρόπο με τον κωδικό δομή εμείς.
Ακριβώς όπως και στη C, έχουμε ένα "αν", ανέφερε δήλωση παρένθεση.
Αυτό δεν είναι αυτό που ήθελα να κάνω.
Το έκανα και πάλι.
>> Χιου Zabriskie: Προσπαθώντας να βγείτε;
SAM ΠΡΑΣΙΝΟ: Όχι, είμαι απλώς προσπαθεί να μεγεθύνετε.
Δεν πειράζει.
>> Έτσι, έχουμε μια "if", και έχουμε μια κατάσταση στο εσωτερικό του
ότι είναι αληθής ή ψευδής, και ότι καθορίζει εάν ή όχι
μπαίνουμε ότι μπλοκ του κώδικα.
Και επίσης, έχουμε ένα άλλο, αν και ένα άλλο, ακριβώς όπως έχουμε συνηθίσει να σε C.
>> Μπορείτε, επίσης, θα πρέπει να είναι αρκετά άνετο δεξιά από το ρόπαλο με βρόχους,
επειδή επίσης να εξετάσουμε μοιάζει πολύ με C φαίνεται.
Αλλά θα παρατηρήσετε και πάλι ότι εμείς έχουν, αντί int initializations,
έχουμε ενεργοποιήσεις var.
Και υποθέτω ότι έχετε να είναι προσεκτικοί για να κάνουν
φροντίστε να μην αλλάξετε την τιμή Ι από έναν int σε μια σειρά,
για παράδειγμα, γιατί αυτό πρόκειται να προκαλέσει παράξενο συμπεριφορά ίσως δεν
αναμένω.
Αλλά αυτό θα πρέπει να εξετάσουμε αρκετά εξοικειωμένοι, καθώς και.
>> Έτσι, αυτό είναι όπου τα πράγματα αρχίζουν να να πάρει λίγο τρελό το JavaScript
για κάποιον που πηγαίνει από το ένα φόντο C. Υπάρχουν λειτουργίες
σε JavaScript, και υπάρχει ένας τρόπος να κηρύξει μια λειτουργία που φαίνεται
είδος παρόμοιο με C, και τότε υπάρχει ένα άλλο που
Φαίνεται είδος διαφορετικό.
>> Η πρώτη έκδοση, το οποίο μπορούμε να δούμε εδώ,
είναι το είδος των C-όπως, όπου λέμε, αυτό είναι μια συνάρτηση,
δώστε ένα όνομα, να δώσει ο αριθμός των επιχειρημάτων,
και στη συνέχεια τα περιεχόμενα της συνάρτησης πηγαίνετε μέσα σε αυτά τα άγκιστρα.
Θα δούμε ένα παράδειγμα επιχειρήματα σε μόλις ένα δευτερόλεπτο.
>> Ότι, στην επόμενη γραμμή, βλέπουμε, OH, εδώ είναι μια μεταβλητή που ονομάζεται "myFunction"
και θα είναι ίσο με αυτό γενικές thing-- function-- ότι
δεν φαίνεται να έχουν καμία εξέλιξη.
Ο λόγος που είναι διαφορετική από C είναι ότι το JavaScript
Είναι αυτό που ονομάζεται λειτουργική γλώσσα, ή έχει λειτουργικά στοιχεία, πράγμα που σημαίνει
ότι οι λειτουργίες είναι πραγματικά αξίες.
Και αυτό σημαίνει ότι μπορούμε να θέσουμε μια μεταβλητή να ισούται μια συνάρτηση
και στη συνέχεια να προχωρήσουμε αυτή την λειτουργία γύρω, να περάσει ως επιχείρημα,
κάνει όλα τα είδη ουσίας όπως αυτό με τις λειτουργίες.
>> Ένα άλλο πράγμα που πρέπει να note-- Οι λειτουργίες γραπτή
με έναν ορισμένο αριθμό επιχειρημάτων.
Θα δούμε ένα παράδειγμα μιας συνάρτησης με ένα επιχείρημα στην επόμενη διαφάνεια.
Αλλά δεν θα το JavaScript φωνάζω σε σας αν προσπαθήσετε
να χρησιμοποιήσετε μια συνάρτηση με το λανθασμένο αριθμό των επιχειρημάτων.
Θα κάνουμε ακριβώς για να γίνει η κάνει, πράγμα που σημαίνει ότι αν περάσει,
μπορείτε να καλέσετε μια συνάρτηση που αναμένει το επιχείρημα, χωρίς επιχειρηματολογία, όλα αυτά που
θα συμβεί είναι ότι θα κάνει το καλύτερο δυνατό για να προσπαθήσουμε και να εκτελέσει αυτόν τον κώδικα,
και αν λειτουργεί τελικά σε εξαίρεσης ή σφάλμα,
αυτό θα ρίξει την εν λόγω εξαίρεση και να κρατήσει μόνο going-- η οποία είναι απλώς ένας από τους τρόπους
ότι το JavaScript λειτουργεί.
Ναι.
>> Κοινό: Τι θα συμβεί αν υπάρχουν πάρα πολλά επιχειρήματα;
SAM ΠΡΑΣΙΝΟ: Έτσι, η ερώτημα ήταν, τι θα συμβεί
αν υπάρχουν πάρα πολλά επιχειρήματα;
Και η απάντηση είναι ότι Θα είναι ακριβώς το JavaScript
αγνοούν αυτά που είναι μετά από αυτά που περίμενε.
Θα προσπαθήσουμε να εκτελέσει τη λειτουργία αποκαλούν σαν να ήταν μόνο τα δύο πρώτα.
Δικαίωμα?
>> Χιου Zabriskie: Αυτό είναι σωστό, ναι.
Ομοίως, αν υπάρχει είναι πολύ λίγοι επιχειρήματα,
Είναι ακριβώς το είδος της δίνει null σε όλα τα επιχειρήματα δεν έχει οποιεσδήποτε τιμές
για.
>> SAM ΠΡΑΣΙΝΟ: η οποία μπορεί να στην πραγματικότητα να είναι βολικό, αν
Θέλετε να γράψετε μια λειτουργία που παίρνει ένα μεταβλητό αριθμό επιχειρήματα.
Μπορείτε να ορίσετε προεπιλεγμένες τιμές ο ορισμός της συνάρτησης,
και μπορεί να αγνοήσει το γεγονός ότι η είσοδος δεν είναι εκεί.
Γι 'αυτό θέλω να μιλήσω λίγο περισσότερα για αυτή την τελευταία σφαίρα
σημείο, που είναι οι συναρτήσεις είναι τιμές.
Αυτό είναι ένα παράδειγμα που είναι λίγο το μυαλό-blowing
αν απλά το διαβάσετε, και δεν νομίζω για το τι συμβαίνει για ένα δευτερόλεπτο.
Έτσι, ας ρίξουμε μια ματιά μόνο στο η πρώτη γραμμή εδώ.
Έχουμε αυτήν τη μεταβλητή, f1, ότι λέμε είναι μια λειτουργία που κάνει αυτό το πράγμα.
Και τα περιεχόμενα της συνάρτησης Οι console.log («γεια σου»).
Μπορείτε να σκεφτείτε console.log όπως η JavaScript ισοδύναμο printf.
Λοιπόν, τι θα συμβεί, αν εμείς εκτελέσετε αυτόν τον κώδικα στον browser μας,
αυτό θα εκτυπώσετε μια σειρά.
Μπορώ να αποδείξει ότι.
Κοινό: Με ημερολόγιο, όμως, ότι δεν σημαίνει ότι είναι καταγράφεται κάπου;
SAM ΠΡΑΣΙΝΟ: Ναι.
Γι 'αυτό και θα σας δείξω τι πρόκειται να συμβεί.
Έτσι, το ερώτημα ήταν, τι κάνει log σημαίνει;
>> Χιου Zabriskie: Έτσι console.log Είναι σαν printf για C.
SAM ΠΡΑΣΙΝΟ: Έτσι console.log είναι σαν printf,
έτσι εάν έχω αυτό το console.log («γεια σου»), και καλώ ότι, το string "γεια"
παίρνει εκτυπώνεται στην κονσόλα.
Αυτή είναι η κονσόλα.
Είναι ακριβώς όπως printf, όπου εκτυπώνει τυποποιημένα.
Και θα δούμε σε ένα λεπτό, αλλά αυτό είναι πραγματικά
αναφερόμενος στο αντικείμενο κονσόλα, και κλήση μιας μεθόδου σε αυτό το αντικείμενο.
Αυτό θα κάνει πιο λογικό σε ένα λεπτό όταν είμαστε
έχετε να μιλάμε για αντικείμενα σε JavaScript,
αλλά σκέφτηκα ότι θα ήθελα να αναφέρω μόνο αυτό.
Χιου Zabriskie: Είμαστε που χρησιμοποιείται στο σημείο Γ, right--
γράφουμε συνήθως ένα μεγάλο πρόγραμμα στην κύρια να κάνει τίποτα.
Αλλά τι είναι δροσερό το JavaScript είναι σας έχουν αυτό το είδος του διερμηνέα ότι
τρέχει σε πραγματικό χρόνο, έτσι ώστε να Χρειάζονται μόνο γραμμή προς γραμμή,
απλά μπορεί να ερμηνεύσει ότι επί τόπου.
Και παρακολουθεί πράγματα που έχουν εκτελεστεί πριν,
έτσι είναι ένα πολύ χρήσιμο εργαλείο για την χρησιμοποιήστε console.log, ή την κονσόλα,
γενικά, για ακριβώς παίζει γύρω με JavaScript.
>> SAM ΠΡΑΣΙΝΟ: Έτσι, πηγαίνει πίσω σε αυτό example-- τη δεύτερη γραμμή κώδικα
εδώ είναι αρκετά μυαλό- στο κεφάλι μου.
Την πρώτη φορά που διάβασα αυτό, Ήταν σαν, τι συμβαίνει;
Έτσι, αυτό που συμβαίνει είναι, αυτό Δήλωση λειτουργία λέει,
Έχω μια συνάρτηση που ονομάζεται F2 ότι είναι αναμένει ένα επιχείρημα, στ,
και στη συνέχεια καλεί η συνάρτηση, f, η οποία
ψηφίστηκε σε αυτό ως ένα επιχείρημα με το ίδιο χωρίς επιχειρήματα.
Έτσι, ότι θα μπορούσε να έχει προκαλέσει σύγχυση.
Αν το καταλάβουμε αυτό και f2 f1 παίρνει ως επιχείρημα, και στη συνέχεια στο εσωτερικό της F2,
στ παίρνει called-- οποία μέσα ότι αυτή η γραμμή του κώδικα,
μετά από αυτές τις δύο γραμμές κώδικα, οδηγεί σε "γεια"
που εκτυπώνεται στην κονσόλα.
>> Το γεγονός ότι μπορούμε να περάσουμε λειτουργιών περίπου ως τιμές
καταλήγει να είναι ένα από τα πιο ισχυρά χαρακτηριστικά της JavaScript
ως γλώσσα προγραμματισμού.
Έξω από όλα τα τρομερά πράγματα που μπορεί να κάνει,
απλά ως ένα χαρακτηριστικό του γλώσσα αφορά τον τρόπο
ότι θα κάνει τα πράγματα εύκολα για τον προγραμματισμό και επιτρέπει
για πράγματα που δεν είναι ιδιαίτερα καλά προσαρμοσμένη στο διαδίκτυο,
λειτουργικό προγραμματισμό και λειτουργικό πτυχές του προγραμματισμού JavaScript
είναι ένα από τα πιο ισχυρές έννοιες που
υπάρχει σε JavaScript-- αν με ρωτάτε.
Δροσερός.
>> Έτσι, επόμενο πράγμα.
Εκτός του ότι είναι λειτουργική, Υπάρχουν επίσης στοιχεία JavaScript
που είναι object-oriented, η οποία είναι ένα από τα πολύ
δημοφιλείς λέξεις buzz στην επιστήμη των υπολογιστών.
Αντικειμενοστραφής προγραμματισμός είναι ένα πολύ δημοφιλές πράγμα.
JavaScript έχει μια έκδοση του ότι, όπου πιστεύω ότι κάθε τιμή είναι επίσης
ένα αντικείμενο, το οποίο σημαίνει ότι κάθε αντικείμενο τυλίγει μαζί κάποιο αριθμό των αξιών.
Έτσι, για αξίες που είναι απλές, όπως ένας ακέραιος, όπως varX ισούται με 5,
ότι αντικείμενο αναδιπλώνεται μόνο ότι μια τιμή.
>> Αλλά μπορούμε επίσης να φανταστούμε μια κατάσταση where-- μπορούμε να σκεφτούμε καταστάσεις σε C
όπου θέλαμε να κάνουμε κάτι με structs,
για παράδειγμα, που αναδιπλώνεται αρκετές αξιών μαζί και μάρκες
είναι πολύ εύκολο να περάσει γύρω από τα πράγματα.
Αυτό είναι όταν ένα αντικείμενο είναι σε JavaScript.
>> Είναι σημαντικό να θυμόμαστε όταν λέω ότι τα αντικείμενα τυλιγμένο
μερικοί αριθμός τιμών μαζί, ότι οι λειτουργίες είναι επίσης
αξίες, που σημαίνει ότι μπορεί να λειτουργεί Επίσης, είναι μέσα από ένα αντικείμενο το JavaScript.
Και ο λόγος που είναι σημαντικό είναι ότι, ενώ συχνά
σκεφτείτε καλώντας μια μέθοδο σε ένα αντικείμενο που είναι
της δημοφιλής όρος από άλλους δημοφιλή αντικειμενοστρεφείς γλώσσες,
μία από τις διαφορές είναι ότι οι εδώ όλα αυτά μια μέθοδος είναι σε JavaScript
είναι μια τιμή που είναι αποθηκευμένη στο εσωτερικό ενός αντικειμένου ότι εκτελεί κάποια action-- ενδεχομένως
χρησιμοποιώντας τις άλλες αξίες που είναι μέσα του αντικειμένου, αλλά δεν είναι απαραίτητα.
Έτσι μπορείτε να φανταστείτε μια κατάσταση, εγώ Υποθέτω ότι σε ένα μικρό κομμάτι από ένα τρελό τρόπο,
όπου θα ονομάζεται μέθοδος μιας αντιταχθεί σε άλλο αντικείμενο, για παράδειγμα.
Έτσι, είναι λίγο funky με αυτόν τον τρόπο.
>> Και μπορείτε επίσης να αλλάξετε τις μεθόδους που σχετίζονται με ένα αντικείμενο
με την ανάθεση αυτής της μεθόδου α νέα λειτουργία, η οποία είναι επίσης
αρκετά διαφορετική από τις άλλες αντικειμενοστρεφείς γλώσσες, όπου
μια φορά δηλώνουμε ένα αντικείμενο και υπόσταση,
δεν μπορούμε να αλλάξουμε τις μεθόδους που είναι που σχετίζονται με αυτό το αντικείμενο πια.
Έτσι ώστε να είναι αρκετά διαφορετική.
Δροσερός.
>> Έτσι, εδώ είναι ένα παράδειγμα, κατ 'αρχάς, ενός αντικειμένου σε δράση.
Αυτό είναι αυτό που ονομάζεται ένα γενικό αντικείμενο, το οποίο
σημαίνει ότι δεν έχει καμία συγκεκριμένο όνομα, δεν έχει μια τάξη,
είναι μερικά μόνο από περιτύλιξη των τιμών.
Και ο τρόπος που φαίνεται είναι, έχουμε Αυτό το εξωτερικό ζεύγος άγκιστρα εδώ
που δείχνουν προς το JavaScript και να πω, αυτό είναι ένα αντικείμενο.
Οι τιμές στο εσωτερικό του είναι το καθένα τιμές στο εσωτερικό
του αντικειμένου που θα πρέπει να τυλιχτούν μαζί.
Και το εσωτερικό του εν λόγω αντικειμένου, τότε έχουμε βασικά ζευγάρια αξίας,
όπου το κλειδί αναφέρεται το όνομα της αξίας εντός του αντικειμένου,
και το άλλο side-- απέναντι από το here-- παχέος εντέρου
είναι η πραγματική αξία ότι θα πρέπει να αποθηκευτεί.
>> Έτσι μπορείτε να δείτε εδώ ότι έχουμε ένα κλειδί που ονομάζεται fn με αξία Σαμ,
ακολουθούμενο από ένα κόμμα, λέγοντας στην επόμενη καταχώρηση.
Στη συνέχεια, ένα κλειδί που ονομάζεται LN, με αξία του πράσινου,
ακολουθούμενο από ένα κόμμα, ακολουθούμενη από "εκτύπωση"
η οποία πρόκειται να έχει μια αξία λειτουργία ότι πρόκειται να κάνει αυτήν τη γραμμή κώδικα.
Ας κάνουμε ένα βήμα πίσω και να απλήρωτος τι συμβαίνει εδώ.
Έτσι, αυτό είναι λίγο περίπλοκο, και βλέπουμε κάτι νέο
για πρώτη φορά.
Το "αυτό" λέξη-κλειδί είναι το νέο πράγμα βλέπουμε εδώ, και τι κάνει αυτό
είναι, αναφέρεται στην τρέχουσα αντιρρήσεις στο πεδίο εφαρμογής, έτσι δεν είναι;
Έτσι, όταν λέμε, αυτό επισημαίνει όλος ο τρόπος πίσω
σε όλη αυτή object-- όταν το κάνουμε this.fn,
θα πάμε για να πάει όλος ο τρόπος πίσω σε αυτό το αντικείμενο, μεταβείτε στην τιμή Fn
και να πάρει Σαμ, τραβήξτε όλο το δρόμο πίσω, να κολλήσει εδώ, και στη συνέχεια να προχωρήσουμε.
>> Κοινό: Έτσι, με την ανάκτηση, είναι ότι γίνεται εξαιτίας της παραμέτρου
ορισμός?
SAM ΠΡΑΣΙΝΟ: Άρα το ερώτημα ήταν, είναι ο ανάκτηση γίνεται εξαιτίας της παραμέτρου
ορισμός?
Ναι, απολύτως.
Τι πρόκειται να συμβεί εδώ είναι, Αυτή η τελεία λέει στον JavaScript,
Εντάξει, παίρνω κάποια αξία από αυτό το αντικείμενο από τον εαυτό μου.
Και τότε θα ψάξει για μια καταχώριση που ονομάζεται fn, και εφόσον διαπιστώσει,
αυτό θα επιστρέψει ότι value-- έτσι, Σαμ.
Αλλά θα μπορούσα επίσης να πληκτρολογήσει κάτι που δεν ορίστηκε εδώ,
και, στη συνέχεια, θα ήταν απλά undefined-- επιστρέψει το οποίο
Είναι ένα πράγμα που μπορεί JavaScript κάνετε, που μπορεί να έχει οφέλη,
αλλά είναι also-- αν κάνετε ένα τυπογραφικό λάθος, μπορεί να οδηγήσει σε παράξενα σφάλματα.
Γι 'αυτό ακριβώς θα προσπαθήσουμε να βρούμε Όπως και να το πείτε για να βρείτε
και δεν πρόκειται να διαμαρτύρονται, αν δεν το βρείτε.
Θα πω απλά, δεν το έκανα βρείτε, και στη συνέχεια να προχωρήσουμε.
Έτσι θα ήταν να είναι απροσδιόριστη, συν κενό, καθώς το τελευταίο όνομα.
Ναι.
Και τότε μπορούμε να δούμε ότι αν θα μπορούσε στη συνέχεια να πάει κάτω και access--
και καλούμε tf.print () με παρενθέσεις.
Είναι πρόκειται να αμφισβητήσει την εκτύπωση λειτουργία χωρίς επιχειρήματα, σωστά;
Αλλά αν εμείς απλά είπε tf.print () ερωτηματικό, χωρίς τις παρενθέσεις,
το μόνο που θα κάνει είναι να τραβήξει από τη λειτουργία από την τιμή,
αλλά στην πραγματικότητα δεν την κάλεσε.
Δροσερός.
Χιου Zabriskie: Πρέπει κάνουμε ένα αντικείμενο;
SAM ΠΡΑΣΙΝΟ: Σίγουρα, ας το κάνουμε αυτό.
Γι 'αυτό και μπορεί να κινηθεί αυτή παράδειγμα στην κονσόλα.
Μπορούμε να φανταστούμε ότι έχω ένα αντικείμενο.
Έτσι, αυτό είναι ένα απλό αντικείμενο.
Αυτό είναι ένα αντικείμενο που περιέχει δύο αξιών με δύο πλήκτρα, δύο βασικά αξία
ζεύγη.
Έτσι, τότε μπορούν να έχουν πρόσβαση την αξία αποθηκευμένη στο εσωτερικό αυτού του αντικειμένου κάνοντας x.x1,
για παράδειγμα, και να πάρω πίσω 1.
Ομοίως, x.x2, να πάρει την τιμή αυτή πίσω.
>> Και τώρα το πραγματικά δροσερό πράγμα είναι, μπορώ πραγματικά να προσθέσει κάτι σε αυτό το αντικείμενο
αφού έχω δημιουργήσει.
Έτσι μπορείτε να φανταστείτε, ας πω ότι έχω μια λειτουργία.
>> Χιου Zabriskie: Μπορείτε Πρέπει να κάνετε Shift-Enter.
>> SAM ΠΡΑΣΙΝΟ: Ω, αυτό είναι ενοχλητικό.
Τι έκανε δεν αρέσει;
Ω.
Ορίστε.
Δροσερός.
>> Έτσι έχω μόλις δημιουργήσατε αυτή η λειτουργία, του F, δηλαδή
πρόκειται να πάει στην τρέχουσα αντικείμενο και this.x1 εκτύπωσης.
Έτσι, αν μπορώ απλά να καλέσετε από f το ίδιο, τίποτα δεν πρόκειται
να συμβεί, δεξιά, επειδή δεν υπάρχει x1 πεδίο στο αντικείμενο αυτό είναι αναφέρεστε.
Αλλά, αν πω, x.f = f, και στη συνέχεια θα καλέστε x.f (), Πάω να πάρει πίσω 1.
Αυτό συνάρτηση f είναι τώρα που σχετίζονται με το αντικείμενο x,
η οποία έχει ένα κλειδί που ονομάζεται x1 που συνδέονται με την τιμή 1,
Έτσι, όταν λέμε this.x1, είναι θα βρείτε αυτό που ψάχνει
και να είναι σε θέση να εκτυπώσετε μια αξία έξω.
Έτσι, αυτό είναι μόνο ένα παράδειγμα του είδους των τρελά πράγματα
μπορείτε να κάνετε με τα αντικείμενα σε JavaScript.
>> Έτσι ώστε η έκδοση ήταν γενική μορφή, με την έννοια
ότι έχουμε δημιουργήσει ένα αντικείμενο με τη χρήση αυτή παρενθέσεις notation-- σημειογραφία τιράντες,
rather-- και αυτό είναι βολικό αν θέλουμε απλώς
ένα παράδειγμα από ένα συγκεκριμένο αντικείμενο, αλλά Τι θα συμβεί αν θέλουμε να έχουμε περισσότερα από ένα
του ίδιου είδους;
Και η απάντηση σε αυτό ερώτημα είναι, υπάρχουν πράγματα
κάλεσε μαθήματα JavaScript, καθώς και.
Μπορούμε να δημιουργήσουμε μια συνάρτηση που κάνει κάποιο είδος της προετοιμασίας
για ένα ξένο αντικείμενο, και θα ήθελα να πω, όπως,
class-- μου έτσι το όνομα της επαναχρησιμοποιήσιμων object--
ισούται με τη λειτουργία που δημιουργεί.
Έτσι αυτό θα ισοδυναμούσε να δημιουργεί ένα αντικείμενο που
θα ήθελα απλώς, σγουρά στήριγμα, str, του παχέος εντέρου,
αυτό είναι μια συμβολοσειρά, ερωτηματικό, σγουρά στήριγμα.
Αυτό θα ήταν το γενικό αντικείμενο που προετοιμαστεί,
με το ένα διαφορά σχετικά με την επόμενες γραμμές θα δημιουργήσει ένα πρωτότυπο, το οποίο
σημαίνει ότι είναι ένα προεπιλεγμένο κλειδί που προσθέτουμε στο αντικείμενο μας, ότι
έχει την αξία που αναφέρονται εδώ.
Αυτό σημαίνει ότι, όταν δημιουργώ ένα νέο παράδειγμα αυτού του αντικειμένου MyClass,
πρόκειται να έχουν προ-χτισμένο μέσα είναι μια τιμή που ονομάζεται οδός και άλλη τιμή
ονομάζεται myPrint, η οποία είναι πρόκειται να είναι μια λειτουργία.
Φοβερός.
>> Εξαιρετική.
Έτσι, το τελευταίο πράγμα που πρέπει να πει για JavaScript
είναι ότι είναι πραγματικά χρήσιμο για το τι καλούνται ασύγχρονες λειτουργίες.
Ασύγχρονη σημαίνει πως μπορεί να περιμένει για κάποια λειτουργία
για να ολοκληρωθεί πριν προχωρήσουμε , αλλά να προχωρήσουμε ενώ περιμένουμε
και στη συνέχεια να έχουν κάτι να συμβεί αργότερα.
Και τι εννοώ με αυτό είναι, μπορούμε να φανταστούμε μια κατάσταση όπου
μπορείτε να στείλετε ένα αίτημα μερικά web server κάπου,
και πρόκειται να σας στείλουν πίσω μερικά μεγάλο κομμάτι των δεδομένων, έτσι δεν είναι;
Και χρήστη μπορούσαμε να περιμένουμε στο Εν τω μεταξύ για να συμβεί αυτό,
και τίποτα δεν θα μπορούσε να είναι συμβαίνει εκείνη τη στιγμή.
Αλλά αυτό δεν είναι ένα μεγάλο σχέδιο, σωστά;
Δεν θέλετε η ιστοσελίδα να παγώσει.
Τι θα συμβεί αν ο χρήστης θέλει να κάντε κλικ σε ένα drop-down μενού;
Δεν είναι ένα μεγάλο πρότυπο σχεδιασμού.
Αντ 'αυτού, αυτό που βασικά Το JavaScript δεν είναι, λέει,
Εντάξει, κάνουμε αυτή τη λειτουργία ασύγχρονα.
Έτσι, όπως, περιμένει στο παρασκήνιο, και στη συνέχεια, όταν η λειτουργία γίνεται,
καλέστε το επανάκλησης function-- καλέσει κάποια λειτουργία,
χρειάζεται κάποια action-- για να επισημάνει ότι η λειτουργία περιμέναμε να τελειώσει
ΤΕΛΕΙΩΣΕ.
Και ο λόγος που είναι εξαιρετικά ισχυρό είναι, μπορούμε να κάνουμε κάτι, να περάσει ένα επιχείρημα,
κάνει κάτι, και στη συνέχεια, περιμένετε για να συμβεί κάτι.
Στη συνέχεια, αφού αυτό το κάτι ολοκληρώνει, μπορούμε να καλέσετε έναν επανάκλησης.
Αυτό είναι πραγματικά χρήσιμο επειδή επιτρέπει μας να κάνουμε τα πράγματα με το Web Audio API,
για παράδειγμα, σαν ένας φορτίο ήχου αρχείο από έναν απομακρυσμένο διακομιστή
χωρίς να χρειάζεται να περιμένετε για το ολόκληρο το αρχείο ήχου που θα φορτωθεί,
η οποία θα είναι πραγματικά κακό για την εμπειρία του χρήστη.
Δροσερός.
>> Τελευταία ζευγάρι σημειώνει σχετικά εντοπισμού σφαλμάτων, δεδομένου ότι αυτό
Είναι ένα πράγμα που πρόκειται να πρέπει να κάνετε ως μέρος του σχεδίου σας, εγγυημένα.
Ανέφερα την κονσόλα JavaScript.
Είναι ένα σούπερ χρήσιμο χαρακτηριστικό όλων των σύγχρονων browsers,
Και είμαστε πραγματικά να σας ενθαρρύνω να πάρετε άνετα χρησιμοποιώντας την κονσόλα σας,
αν θέλετε να πάρετε καλοί σε JavaScript.
Είναι εξαιρετικά βολικό για εντοπισμό σφαλμάτων, αλλά είναι επίσης
πραγματικά χρήσιμο για την εξεύρεση πώς να χρησιμοποιούν ένα API.
Παρέχει τη δυνατότητα για πραγματικά εύκολο πειραματισμό
χωρίς να χρειάζεται να πληκτρολογήσετε κάποια κώδικα, και στη συνέχεια να το υπολογίσουν.
Δεν χρειάζεται να κάνετε όλα αυτά τα βήματα.
Μπορείτε να γράψετε μόνο ένα τμήμα κώδικα σε μια γραμμή,
και στη συνέχεια να πάρει για την άμεση ανατροφοδότηση αν η γραμμή κώδικα ή όχι
worked-- πολύ βολικό.
>> Και, επίσης, μία μόνο τεχνική note-- η κονσόλα JavaScript είναι ένα παράδειγμα
ενός REPL-- έτσι ώστε να είναι Ε-Ε-Ρ-Ε, REPL, το οποίο σημαίνει ανάγνωση, την αξιολόγηση,
βρόχο εκτύπωσης.
Θα πάμε για να πληκτρολογήσετε κάποια πράγματα σε, αυτό θα διαβάσει αυτά που γράψατε στο,
αυτό θα το αξιολογήσουν, και αυτό θα εκτυπωθεί η εξόδου, και στη συνέχεια θα ξεκινήσει και πάλι.
Αυτό σας επιτρέπει να μεταβείτε γρήγορα σε κύκλους επανάληψη, το οποίο είναι πραγματικά δροσερό.
>> Υποθέτω πραγματικό τελευταίο αυτό note-- είναι η πραγματική τελευταία νότα, ναι.
Πώς μπορούμε πραγματικά να χρησιμοποιήσετε τη JavaScript;
Έτσι, πρώτα, μπορούμε να εισάγουμε χρησιμοποιώντας μια ετικέτα script
στην κορυφή ή στο κάτω μέρος του HTML file-- οπουδήποτε μέσα από ένα αρχείο HTML,
πραγματικά.
Και μέσα σε ένα tag σενάριο, υπάρχουν δύο υπο-τρόποι εισαγωγής JavaScript.
Ο πρώτος είναι με έχει ένα ξεχωριστό αρχείο JavaScript
ότι εισάγουμε στο σύνολό του, ή από την κατοχή μιας περιοχής του κώδικα, όπως το script
για να ξεκινήσει, και στη συνέχεια ανάστροφη κάθετο σενάριο μέχρι το τέλος.
Και τότε γράφουμε μόνο JavaScript μέσα στο αρχείο HTML.
Αυτοί είναι οι δύο τρόπους.
Δεν μπορείτε να το έχετε στο εσωτερικό της HTML.
Κοινό: Είναι το ένα καλύτερο από το άλλο;
SAM ΠΡΑΣΙΝΟ: Το ερώτημα ήταν, είναι ένα καλύτερο από το άλλο.
Έτσι, ναι, ως πρακτική στυλ κωδικοποίησης, και, επίσης, είναι σαν μια πρακτική σχεδιασμού.
Υπάρχουν δύο λόγοι Γι 'αυτό θα μπορούσε να είναι καλύτερη.
Το πρώτο είναι, ότι κάνει κωδικό σας ένα διαβάζονται πιο εύκολα αν όλες HTML σας
είναι σε ένα μέρος, το σύνολο των CSS σας είναι σε άλλο τόπο, όλα JavaScript σας
βρίσκεται σε τρίτη θέση.
Δικαίωμα?
Νομίζω ότι θα έπρεπε να έχουμε ήδη μιλήσει γι 'αυτό σε sections-- όπως CSS-- τι
ότι is-- και πηγαίνει συχνά σε ένα άλλο αρχείο.
Έτσι, παρόμοιο είδος της έννοιας εδώ.
Μπορείτε επίσης να φανταστείτε ότι το JavaScript θα επαναχρησιμοποιηθεί σε περισσότερες από μία
Σελίδα HTML, ή ίσως μια πολλές σελίδες HTML,
και έχοντας ότι το JavaScript ανανεωμένος σε ένα
αρχείο που μπορείτε να εισαγάγετε σε περισσότερες από μία θέση
επιτρέπει ο κώδικας να είναι τρόπο πιο διατηρήσιμη.
Μπορείτε να φανταστείτε την παραγωγή ενός αλλάξετε το JavaScript
και χρειάζεται να το αλλάξετε σε 100 διαφορετικά αρχεία.
Και αντί να μπορούμε να την αλλάξουμε μόνο σε ένα, το οποίο είναι πολύ πιο ισχυρό.
Μήπως μπορώ να απαντήσω στην ερώτησή σας;
Δροσερός.
>> Μπορούμε επίσης να πληκτρολογήσετε στην κονσόλα, όπως έχουμε αναφέρει στο παρελθόν.
Και πάλι, μια τελευταία note-- Web Audio είναι χτισμένο σε,
δεν χρειάζεται να φορτώσει τίποτα.
Δροσερός.
Υπάρχουν ερωτήσεις, έχετε πια ερωτήσεις σχετικά JavaScript,
πριν προχωρήσουμε;
>> Κοινό: [δεν ακούγεται]
SAM ΠΡΑΣΙΝΟ: Εντάξει, δροσερό.
Έτσι τώρα που πρόκειται να μιλήσουμε για το API.
>> Χιου Zabriskie: Cool.
Ευχαριστώ, Σαμ.
>> SAM ΠΡΑΣΙΝΟ: Σίγουρα.
Χιου Zabriskie: Awesome, έτσι θα περάσουμε από το JavaScript.
Έτσι, έχουμε μιλήσει για μερικά από τα τα βασικά στοιχεία της JavaScript,
και αυτές είναι οι μεταβλητές, συναρτήσεις, αντικείμενα, λειτουργεί ως μεταβλητές,
ασύγχρονη φόρτωση.
Αυτά είναι όλα τα πράγματα που θα δείτε καθώς χρησιμοποιείτε το Web Audio.
Έτσι, είμαστε ακριβώς πρόκειται να μιλήσω για πρώτη φορά σε ένα υψηλό επίπεδο.
>> Είναι ένα API, γι 'αυτό είναι κάτι ότι είναι χτισμένο, όπως δήλωσε ο Σαμ,
δεξιά στο JavaScript ότι μπορείτε να χρησιμοποιήσετε στην κονσόλα.
Και είναι πραγματικά ακριβώς όπως η C ++ κώδικα Αυτό είναι πραγματικά ενσωματωμένο στο Chrome
και Firefox, και όλα αυτά τα προγράμματα περιήγησης.
Έτσι, η βασική ιδέα με το Web Ήχου είναι ότι έχετε
Αυτό το είδος του αγωγού του ήχου, έτσι δεν είναι;
Έτσι, τα δεδομένα ήχου σας έρχεται σε σε κάποια μορφή.
>> Υπάρχουν είδους τρεις κύριες forms-- έχετε τον ταλαντωτή, η οποία
δημιουργεί ένα ημιτονοειδές κύμα, συνημίτονο κύμα, θα πάμε να δούμε πώς αυτό λειτουργεί.
Ένα άλλο πολύ διαδεδομένο, φυσικά, είναι ένα MP3.
Έτσι ίσως να ξεκινήσετε με ένα τραγούδι, και στη συνέχεια θα
θελήσετε να κάνετε κάποια φιλτραρίσματος σε αυτό και εξόδου
that-- ότι θα μπορούσε να είναι μια πιθανή πηγή.
Και τότε ένα πραγματικά δροσερό το ένα είναι το μικρόφωνο.
Έτσι, μπορείτε να χρησιμοποιήσετε κάποιο πολύ βασικές κλήσεις JavaScript
για να αποκτήσετε πρόσβαση στο μικρόφωνο, και έτσι αν
ήθελε να κάνει μια εφαρμογή όπως έναν ανιχνευτή αγωνιστικό χώρο,
για παράδειγμα, ότι παίρνει σε φωνή και τα στοιχεία από σας
η pitch-- πολύ εύκολος τρόπος για αυτό.
Μπορείτε να ακριβώς το είδος του να το διαβάσει σε, να καταλάβω τη συχνότητα,
και τότε η έξοδος ένας αριθμός.
Έτσι θα δούμε πώς αυτό λειτουργεί, όπως καλά.
>> Ο προορισμός είναι βασικά όπου τα δεδομένα ήχου εξόδου.
Έτσι γενικά, αυτό είναι σαν να ηχεία του φορητού σας υπολογιστή.
Άλλες επιλογές είναι σαν α ScriptProcessorNode--
θα φτάσουμε σε κόμβους ενός second-- αλλά βασικά,
είτε βάζετε ήχο έξω μέσω του υπολογιστή σας μέσω των ηχείων,
ή είστε το είδος του σημειώνοντας, έτσι είστε το αποθηκεύει τα δεδομένα ήχου.
Έτσι, ίσως αν κάποιος δημιουργεί μουσική στην εφαρμογή σας και, στη συνέχεια,
θέλετε να καταγράψετε αυτό και ίσως, όπως να εξάγει σε SoundCloud, για example--
ότι θα ήταν ένας τρόπος να το κάνουμε αυτό.
Όλα τα πράγματα διασκέδαση, το οποίο θα μιλήσουμε για,
συμβαίνει μεταξύ αυτών των δύο σημείων, όπου θα φορτώσει στη μουσική
και τότε η έξοδος του.
>> Έτσι, Πάω να μιλήσω για το πέντε στάδια της παραγωγής ήχου σε ένα δευτερόλεπτο.
Έχουμε αυτό το πράγμα που ονομάζεται μια AudioContext, η οποία
Είναι αυτό το μικρό περιτύλιγμα που βλέπουμε εδώ.
Βασικά αυτό AudioContext is-- αν μεταβείτε στην κονσόλα JavaScript τώρα,
μπορούμε να δημιουργήσουμε ένα τώρα.
Ακριβώς ένα παράδειγμα της REPL, σωστά;
Είμαστε ανάγνωση, την αξιολόγηση, και εκτυπώνει.
>> AudioContext είναι ένα παγκόσμιο κράτος.
Είναι ένα struct, είναι ένα αντικείμενο εδώ, και κρατά τις πληροφορίες
για πράγματα που είναι σε εξέλιξη στην οθόνη σχετικά με τον ήχο.
Ένα παράδειγμα είναι η τρέχουσα ώρα.
Αυτό σας ενημερώνει για τον αριθμό δευτερόλεπτα, με μεγάλη ακρίβεια,
δεδομένου ότι η ιστοσελίδα φορτώνεται.
Έτσι, αυτό είναι ένα πραγματικά χρήσιμο μικρή ιδιοκτησία που μπορείτε να χρησιμοποιήσετε.
Είναι διαβάσετε only-- Νομίζω ότι πραγματικά μπορείτε να προσπαθήσετε να το ρυθμίσετε μια τιμή.
Θα σας πω το ρυθμίσετε, και, στη συνέχεια, αν το εκτυπώσετε
again-- δεν το έκανε πραγματικά πολύ δουλειά.
Έτσι υπάρχουν μόνο για ανάγνωση ιδιότητες σε JavaScript.
Αυτό είναι πραγματικά χρήσιμο εάν είστε το είδος του το συγχρονισμό
πολλά διαφορετικά πληροφορίες, όταν είστε
το είδος που παίζουν διαφορετικούς ήχους.
>> Μια άλλη πολύ χρήσιμη είναι ο προορισμός πλαίσιο.
Σίγουρα, αν σας ενδιαφέρει, να προσπαθώντας αυτό με δική σας κονσόλα της δεξιάς
τώρα.
Έτσι, αυτό είναι ένα AudioDestinationNode.
Βασικά αυτό που λέει ότι αυτό είναι, όπου η έξοδος πηγαίνει;
Έτσι, υπάρχουν δύο πραγματικές επιλογές εδώ.
Συνήθως η προεπιλεγμένη Είναι απλά τα ηχεία σας,
έτσι AudioDestinationNode λέει βασικά μόνο
υπάρχουν μηδέν εξόδους με τον ήχο έρχονται, στα ηχεία.
Έτσι, σε γενικές γραμμές, δεν το κάνετε πρέπει να παίξουν με αυτό.
Αν σας ενδιαφέρει στην πραγματικότητα, χρησιμοποιώντας η ScriptProcessorNode για εγγραφή,
σίγουρα πυροβολούν μου ένα e-mail αργότερα γιατί αυτό είναι
λίγο πιο περίπλοκη.
Αλλά σε γενικές γραμμές, είστε ακριβώς το είδος από την έξοδο ήχου σε κάποια μορφή.
Έτσι δροσερό, θα πηδήσει πίσω εδώ.
Κοινό: Λυπάμαι.
Χιου Zabriskie: Ναι.
Κοινό: Ξέρω ότι είπατε να μιλήσετε για να σας αργότερα για την εγγραφή.
Μπορείτε να διασυνδέσει ότι με τα Pro Tools;
>> Χιου Zabriskie: Με το Pro Tools;
Ας δούμε.
Δε νομίζω.
Έτσι, πηγαίνει μεταξύ του πελάτη, το οποίο είναι το JavaScript
κονσόλα, και τις πραγματικές σας υπολογιστών, είναι γενικά
κάτι που είναι είδος από εκτός ορίων, εάν
θα, είδος από τη φύση του the-- είναι το είδος του πράγματος σχεδιασμού,
αλλά θα προσπαθήσει να κρατήσει το πρόγραμμα περιήγησης ξεχωριστά από την πραγματική του υπολογιστή του χρήστη.
Σε γενικές γραμμές, το μόνο πράγμα που θα είστε σε θέση να Πρόσβαση είναι το μικρόφωνο ή την κάμερα.
Δεν είστε σε θέση να, εγώ Δεν νομίζω, χρησιμοποιήστε το Pro Tools.
Ωστόσο, αν έχετε δημιουργήσει ένα κομμάτι σε Pro Tools,
εξάγονται από αυτό, θα μπορούσε να φορτώσετε το εδώ, αυτό το φίλτρο, για παράδειγμα,
διαδικασία η οποία, και καταγράφει ότι σε μια Ήχος Destination-- ή, no-- μια σφαίρα
Επεξεργαστής κόμβου.
Και στη συνέχεια, από εκεί, θα μπορούσατε Εξάγουμε ότι για να SoundCloud, σας
θα μπορούσε να το στείλετε σε ένα μήνυμα ηλεκτρονικού ταχυδρομείου, ή Ό, τι σας αρέσει από εκεί.
>> Αλλά υπάρχει το είδος του μια μικρή φράγματος μεταξύ τη μουσική στον υπολογιστή σας
και τη μουσική σε απευθείας σύνδεση.
>> SAM ΠΡΑΣΙΝΟ: Και αυτό είναι δεν είναι μοναδική σε αυτό το API.
Είναι ένα χαρακτηριστικό ασφαλείας του Chrome, και Νομίζω ότι κάθε άλλο σύγχρονο πρόγραμμα περιήγησης.
Το πρόγραμμα περιήγησης είναι αυτοδύναμη.
Έτσι, για παράδειγμα, μια ιστοσελίδα δεν μπορεί να χρησιμοποιήσετε την Javascript για να απενεργοποιήσετε τον ήχο
για τα ηχεία σας, για παράδειγμα.
Ή δεν μπορεί να απενεργοποιήσετε τον υπολογιστή σας.
Και δεν υπάρχει κανένα ενδιάμεσο σημείο μεταξύ αυτών των δύο πράγματα, δεξιά,
οπότε είτε έχετε ένα πλήρης αφαίρεση,
ή θα ανοίξει το ελάττωμα ασφαλείας να αφήσει
ένας προγραμματιστής με κακές προθέσεις κάνουμε ό, τι θέλουν με το laptop σας.
Και γι 'αυτό Chrome είναι αυτοδύναμη.
>> Χιου Zabriskie: Ναι.
Βγάζει νόημα αυτό?
Cool, δροσερό.
Ήμουν ακριβώς πρόκειται να δείχνουν ένα παράδειγμα ενός.
Αυτό είναι λίγο πολύ όπως όσο μπορείτε να πάρετε, όσον αφορά
από την πρόσβαση στον υπολογιστή του χρήστη.
Εάν έχετε ένα πληκτρολόγιο USB στην πρίζα, μπορείτε να χρησιμοποιήσετε κάτι που ονομάζεται Web
MIDI API, το οποίο δεν θα Πραγματικά μιλάμε για εδώ,
αλλά αυτό είναι μια άλλη API που είναι ενσωματωμένη σε τουλάχιστον Chrome-- πάλι,
Γι 'αυτό αγαπάμε Chrome-- Νομίζω Firefox ή Safari,
αυτό είναι ένα εύκολο πράγμα να google-- διαφορετικά προγράμματα περιήγησης έχουν
διαφορετική στήριξη για τις οποίες APIs που έχουν υλοποιηθεί.
Αλλά αν θέλετε να συνδέσετε ένα πληκτρολόγιο και να συνεργαστεί με αυτές τις πληροφορίες,
είδος στείλετε το πληκτρολόγιο πληροφορίες πάνω στον υπολογιστή
και στη συνέχεια να χρησιμοποιήσετε αυτή την online, αυτό το API είναι όπου θέλετε να λειτουργεί αυτό.
>> Δροσερός.
ΕΝΤΆΞΕΙ.
Έτσι, γρήγορα κινείται εδώ.
Πώς τα πάμε στην ώρα τους;
>> ΟΜΙΛΗΤΗΣ 1: Περίπου 15.
>> Χιου Zabriskie: 15 λεπτά αριστερά;
Εντάξει, δροσερό.
Έτσι θα αγωνιστεί μπροστά εδώ.
>> Έτσι, βασικά, το κύριο σημείο σκέφτομαι αυτό ως αγωγός
είναι ότι κάθε βήμα στον αγωγό είναι μια σειρά κόμβων ήχου.
Η πηγή μας, ας πούμε, είναι ένας ταλαντωτής.
Πρέπει να δημιουργήσουμε ένα κόμβο ταλαντωτή.
Και αυτό είναι ακριβώς το είδος του μικρού function--
και είναι όλα με βάση έξω του ήχου πλαίσιο εδώ.
>> Κοινό: Όταν το είπε ταλαντωτή, αυτό σημαίνει ότι
στην πραγματικότητα είναι κυριολεκτικά πηγαίνει από δύο διαφορετικές πόλους και πίσω;
>> Χιου Zabriskie: Όχι, είναι σαν να μια ψηφιακή αναπαράσταση.
Είναι πράγματι υλοποιηθεί σε C ++.
Εγώ πραγματικά δεν ξέρω τα specs από το πώς είναι πραγματικά σε εφαρμογή,
αλλά όλο αυτό λειτουργεί ως δυαδικά δεδομένα.
Στην πραγματικότητα, ναι.
Αυτό θα έλεγε, θα μπορούσα στην πραγματικότητα, αν σας ενδιαφέρει,
Θα μπορούσα να σας στείλουμε λίγο περισσότερο πληροφορίες σχετικά με το πώς οι κυματομορφές
φυλάσσονται έχουν μια ψηφιακή μορφή.
Εντάξει, δροσερό.
>> Έτσι είμαστε παράγει έναν ήχο σαν ένα ημιτονοειδές κύμα ή κάτι τέτοιο, ίσως
440 Hertz.
Έχουμε δημιουργήσει ένα ταλαντωτή.
Αν θέλουμε να ρυθμίσετε την ένταση του ήχου, που συνδέετε τίποτε σε GainNode,
η οποία θα μπορούσε να κάνει με .creategain.
Αυτό ρυθμίζει την ένταση του ήχου.
Μπορείτε να περάσετε σε οποιαδήποτε ότι του άλλου options-- καλά,
έτσι μια πηγή ήχου ρυθμιστικό κόμβος είναι όπου ίσως
αποθηκεύσετε ένα MP3 που έχετε φορτωθεί στην.
>> Biquad φίλτρο για το φιλτράρισμα, εάν θέλετε να πάρετε όλες της βάσης έξω
ενός τραγουδιού, ή κάτι τέτοιο.
Θεός φυλάξοι θέλετε να πάρετε η βάση έξω από ένα τραγούδι.
Και AudioDestination κόμβος είναι, και πάλι, όπως και όπου οριστικοποίηση μας είναι.
Αν βρεθείτε ποτέ με ενδιέφερε να δω όλες οι διάφορες πιθανές εναλλακτικές λύσεις,
απλά πηγαίνετε στην καρτέλα και αφήστε η αυτόματη συμπλήρωση καταλήξει.
Και αν θέλετε να δημιουργήσετε, θα δείτε όλα τα διαφορετικά πράγματα που μπορείτε να δημιουργήσετε.
Μπορείτε να δημιουργήσετε δυναμικές επεξεργαστές σενάριο,
Εγώ δεν ξέρω καν τι είναι, για την ανάμειξη συγχωνεύσεις κανάλι
και διαχωριστές κανάλι και όλα αυτά.
Δροσερός.
>> Έτσι, αυτό είναι μόνο ένα παράδειγμα ενός αγωγού.
Έτσι έχουμε τρεις πηγές έρχονται.
Ίσως αυτά είναι κυματομορφές, Ίσως αυτές είναι MP3s.
Ένα περνά από μια φίλτρο, ένα άλλο του
να πάρει μια άλλη διαστρεβλωμένη panning κάποιου αριστερά και δεξιά.
Μπορείτε να κάνετε όλα τα είδη των πραγμάτων και όλα μπερδεύονται γύρω από κοινού,
και, στη συνέχεια, βγαίνει ο ήχος στο τέλος, ως προορισμό.
Αυτό είναι ένα παράδειγμα του τι περισσότερο περίπλοκη Web κωδικός ήχου μοιάζει.
Είσαι δημιουργώντας όλα αυτά διάφορα αντικείμενα σωστά here--
Δεν είμαι σίγουρος για αυτό.
Όχι, δεν μεγεθύνετε.
ΕΝΤΆΞΕΙ.
>> SAM ΠΡΑΣΙΝΟ: Μπορείτε να το κάνετε Ελέγχου, Scroll-Up.
Χιου Zabriskie: Έλεγχος Scroll--
SAM ΠΡΑΣΙΝΟ: Όχι, όχι.
Έλεγχος--
>> Χιου Zabriskie: Ω, ελέγχου, κάντε κύλιση;
Ω, gotcha.
Ναι.
Πω πω, Όχι, Όχι.
ΕΝΤΆΞΕΙ.
Εγώ δεν θα το κάνουμε αυτό.
>> Οπότε ναι, σε αυτό το πρώτο ενότητα εδώ, μπορείτε να δείτε
είμαστε η δημιουργία όλων αυτών των διαφορετικών κόμβους έξω από το πλαίσιο.
Είμαστε ακριβώς τους συναρμολογώντας μαζί με το δεύτερο σκέλος
από αυτή την λειτουργία που ονομάζεται Connect.
Αυτό είναι ένα πραγματικά κλειδί λειτουργία σε Web Audio.
Απλά σημαίνει ότι τη στιγμή που έχετε κάνει κάτι με τον ήχο σε έναν κόμβο,
να το δώσετε στον επόμενο κόμβο.
Έτσι έχουμε την πηγή, συνδέεται με τον αναλυτή,
Ο αναλυτής κάνει κάτι με αυτό, πηγαίνει σε στρέβλωση, και ούτω καθεξής,
και με τον προορισμό στην κάτω δεξιά γωνία εδώ.
Δροσερός.
Εντάξει, έτσι θα συνεχίσει να κινείται επάνω.
>> Η pipeline-- πάλι, αυτά είναι τα πιο κοινά αγωγούς,
οπότε μιλάμε για όλα αυτά τα πράγματα, όπως παραμόρφωση, panning, όλα αυτά τα πράγματα.
Εάν είστε πραγματικά ενδιαφέρονται χρησιμοποιώντας τα πράγματα Pro Tools,
αυτά που ενδιαφέρουν κατά πάσα πιθανότητα.
Αν όχι, ίσως απλά θέλουν να παίξουν τον ήχο,
ή ίσως απλά θέλετε να ρυθμίσετε την ένταση του ήχου.
Αυτοί είναι οι δύο πιο κοινές είδος των αγωγών στην παραγωγή ήχου.
>> Και πάλι, οι τρόποι που μπορείτε να το πάρετε στην ως oscillator-- έτσι, ας
κάνει ένα demo του το δικαίωμα αυτό εδώ.
Έτσι θα πάμε να δημιουργήσουμε ένα απλό πλαίσιο ήχου εδώ,
και από το ότι θα πάμε να δημιουργήσει ταλαντωτή μας.
Έτσι ώστε να είναι, και πάλι, είμαστε απλά πρόκειται να καλέσει Δημιουργία ταλαντωτή.
Εμείς πάμε για να ορίσετε μια συχνότητα ότι, 440 Hertz, το αγαπημένο όλων.
Στη συνέχεια συνδέουμε ότι με τον προορισμό point-- που είναι ο ομιλητής, έτσι
ο προορισμός πλαίσιο.
Τέλος, απλά λέμε, ξεκινήστε το μηδέν δευτερόλεπτα από τώρα, και να έχουμε ήχο;
>> [Δακτυλίωσης]
>> Χιου Zabriskie: Εδώ πάμε.
Είναι απλά ένα ημιτονοειδές κύμα.
Εντάξει, δροσερό.
Και τότε θα το σταματήσουμε αυτό.
>> Κοινό: Πού πήγε ότι η ανατροφοδότηση προέρχεται από;
>> Χιου Zabriskie: Η ανατροφοδότηση;
Ω, πιθανώς μικρόφωνα μας.
Οπότε ναι, αυτό είναι το πώς μπορείτε να το κάνετε.
Και πράγματι, αν είχα κράτησε το τρέξιμο, μπορείτε
θα μπορούσε να έχει τη συχνότητα αξίας, όπως είναι το τρέξιμο,
έτσι ώστε να είναι ένα διασκεδαστικό πράγμα που πρέπει να παίζουν.
Δροσερός.
Αυτό είναι πάντα μια όμορφη εκείνη που παρουσιάζει.
>> SAM ΠΡΑΣΙΝΟ: Εμείς δεν το έκανε σκεφτούμε ότι, δεν είμαστε;
Χιου Zabriskie: Ναι, αυτό είναι ένα δυσάρεστο ένα.
Έτσι, ρυθμιστικό loading-- θα σας δείξω ένα παράδειγμα ότι στο τέλος.
Αυτό είναι φόρτωση ενός MP3.
Και μικρόφωνο, μπορείτε να χρησιμοποιήσετε μόνο μια λειτουργία ονομάζεται Navigator.getUserMedia ()
να ζητήσει την πρόσβαση στο χρήστη μικρόφωνο για αυτές τις πληροφορίες.
>> Εδώ είναι το φιλτράρισμα, θα μόλις συνεχίσει να κινείται από αυτό.
Αυτό είναι αρκετά υψηλό επίπεδο, αλλά τα φίλτρα σας επιτρέπουν μόνο να
>> [Beeping]
Φιλτράρισμα σας επιτρέπει επίσης να δημιουργήσουν τα πράγματα όπως το ροζ
θόρυβος, θόρυβος καφέ, λευκό θόρυβο.
Αν θέλετε να δημιουργήσετε καθαρή θορύβου, η οποία Μερικοί άνθρωποι αγαπούν να βρωμίσει γύρω με,
μπορείτε να χρησιμοποιήσετε το Web Audio φιλτράρισμα για να το κάνουμε αυτό.
>> Ήχος Panning-- οπότε φανταστείτε εάν γράφετε ένα παιχνίδι
και θέλετε να τον ήχο ακούγεται σαν να έρχεται, όπως,
γυρίσματα σε όλη την οθόνη, μπορείτε μπορεί να χρησιμοποιήσει το panning του ήχου
για να δημιουργήσει αυτό το είδος του κώνου, η οποία like-- είναι αρκετά Mathy,
αλλά είναι πραγματικά πολύ δροσερό αν έχετε δουλέψει,
και υπάρχει κάποια καλή tutorials για αυτό που μπορώ να σας στείλουμε.
Βασικά, μπορείτε να το είδος από τη δημιουργία του ήχου
κάτι πηγαίνει από σε ένα 3D τρόπο.
Και αν έχετε ένα ενδιαφέρον για DJ, μπορείτε να ξεκινήστε την ανάμιξη και διασχίζουν ξεθώριασμα τραγούδια.
>> Αυτή είναι μόνο κάποια πολύ βασικά κώδικας, βασικά αυτό που έκανα πριν.
Αυτό ρυθμίζει την ένταση του ταλαντωτή, έτσι ώστε να δημιουργήσουμε ταλαντωτή μας
η οποία δημιουργεί την κυματομορφή.
Δημιουργούμε GainNode μας, ορίσετε τη συχνότητα μας,
και, στη συνέχεια, συνδέστε το με το ταλαντωτή GainNode, η οποία στη συνέχεια ουσιαστικά αλλάζει
πόσο σήμα επιτρέπεται μέσω.
Αλλά πραγματικά, αυτό είναι ένα ψηφιακό πράγμα, γι 'αυτό είναι πιο just-- ναι.
Αυτό δεν είναι ό, τι πραγματικά συμβαίνει, αλλά αυτό είναι ό, τι συμβαίνει στην πραγματική ζωή
με ένα κέρδος.
>> Κοινό: --quantization της παραμέτρου του όγκου;
Χιου Zabriskie: Συγνώμη;
Κοινό: το Α είναι κβαντοποιημένο παράμετρος όγκο;
Χιου Zabriskie: Ναι.
Και αυτό είναι ένα πράγμα είμαι πραγματικά με ανεπάρκεια σε σε γνώσεις μου,
πόσο κέρδος λειτουργεί σε ένα ψηφιακό επίπεδο.
Ξέρω ότι με τις πραγματικές σήματα, είναι ουσιαστικά
ελέγχει πόσο είστε ενίσχυση του σήματος.
Οπότε, ναι.
Θα σας στείλω περισσότερες πληροφορίες σχετικά με ότι, επειδή θα ήμουν περίεργος πραγματικότητα
για να μάθετε περισσότερα γι 'αυτό.
Αλλά βασικά οι παράμετροι είναι, το ένα είναι η fold--
το δυνατότερο signal-- και μηδέν δεν είναι σήμα, ή δεν θα ακούσετε κανέναν ήχο.
Θα παραλείψετε χρόνο demo για το λόγω είναι βασικά αυτό που έκανα πριν.
Και πάλι, η Context.Destination είναι ο κόμβος προορισμού ήχου.
Φοβερό, εντάξει.
>> Έτσι, Πάω να κάνω ένα γρήγορο δύο demos.
Πώς τα πάμε στην ώρα τους;
>> ΟΜΙΛΗΤΗΣ 1: Περίπου 10 λεπτά.
>> Χιου Zabriskie: 10 λεπτά;
Εξαιρετική!
Φοβερός.
>> Έτσι, η πρώτη Πάω να κάνετε, αυτό λέγεται το αγαπημένο μου τραγούδι.
Έτσι, αυτό είναι μόνο ένα λίγο HTML JavaScript.
Εμείς πάμε για να έχουν δύο κουμπιά στη σελίδα παίξουν το αγαπημένο μου τραγούδι
και να σταματήσει το αγαπημένο μου τραγούδι.
Θα αλλάξει αυτό.
>> Κοινό: Καλύψτε το μικρόφωνό σας.
>> Χιου Zabriskie: Ναι.
Και έχω φορτωθεί εδώ ένα σενάριο που basically--
και αυτό είναι πραγματικά χρήσιμο για τη φόρτωση ενός MP3,
έτσι αυτό ακριβώς κάνει φόρτωση MP3s πολύ πιο γρήγορα.
Είναι ουσιαστικά μόνο ένα περιτύλιγμα.
Κάνει ακριβώς τη διαδικασία της φόρτωση σε MP3s πολύ πιο γρήγορα,
αλλιώς είστε χρησιμοποιώντας αίτημα HTTP, κάτι σαν αυτό που κάναμε
σχετικά με την τρέχουσα κομμάτι που με διακομιστή.
Είναι πραγματικά άσχημο, σας Δεν θέλω να το κάνω.
>> Έτσι αυτός ο τύπος, Μπόρις ΜΜΕ, έγραψε ένα πραγματικά χρήσιμο εργαλείο που λέγεται BufferLoader.
Όλα όσα κάνουμε είναι απλά να περάσει αυτό το πλαίσιο, που το ένα list-- περάσει
ή, ναι, είναι ένας κατάλογος σε JavaScript;
SAM ΠΡΑΣΙΝΟ: Μια σειρά.
Χιου Zabriskie: Ω, είναι μια σειρά, αυτό είναι σωστό.
Είναι μια σειρά από μονοπάτια σε διαφορετικά αρχεία.
Και τότε θα είναι μια συνάρτηση περάσει.
Αυτή είναι η επανάκληση μιλούσαμε σχετικά με ασύγχρονη φόρτωση.
Που θα κληθούν μια φορά τα αρχεία που φορτώνονται.
Και ότι η λειτουργία που καλείται όταν το αρχείο είναι φορτωμένο λαμβάνει ως περίμετρο
μια σειρά από ρυθμιστικά φορτωμένο.
Έτσι ώστε να συμβαίνει εδώ.
Βασικά, είναι BufferList πρόκειται να είναι ένα value--
ή πρόκειται να είναι μια σειρά από μήκος το ένα, που έχει μέσα του δείκτη
μηδέν ολόκληρο το φορτωμένο αρχείο του MP3.
Λοιπόν, τι να κάνω όταν τελειώσω φόρτωσης είναι, απλά
δημιουργήσετε ένα ρυθμιστικό πηγή, η οποία είναι ένα ηχητικό κόμβο πηγή ρυθμιστικό.
Το επόμενο βήμα είναι η τοποθέτηση των στο source.buffer ως πλήρες ρυθμιστικό φορτίο
από την BufferList-- είναι μια πολύ buffers--
και, στη συνέχεια, μπορείτε να συνδέσετε ότι ήχου ρυθμιστικό προς τον προορισμό.
Έτσι τι πρόκειται να κάνουμε Είναι απλά βάλτε το MP3
κατ 'ευθείαν μέσα στην έξοδο, και να αρχίσει αμέσως
μετά να πάρει αυτό το κάλεσμα.
>> Cool, οπότε ας δούμε αυτό να συμβεί σε δράση.
Μου [δεν ακούγεται] εδώ, ας δούμε.
Έτσι, είμαι απλώς πρόκειται να ξεκινήσετε ένα βασικό διακομιστή.
Αυτό είναι κάτι που που πρέπει να κάνετε αν είστε
υποβολής αιτήσεων για τη φόρτωση αρχείων.
Πάω να ξεκινήσει μια βασική διακομιστή.
Αυτό είναι βασικά ολόκληρο σας PSET τώρα σε μία γραμμή,
αλλά αυτό είναι ακριβώς που αρχίζουν ένα διακομιστή στο λιμάνι 80/80.
Γι 'αυτό και πάει πέρα ​​από εδώ, εμείς πρόκειται να τοποθετήσετε 80/80,
θα πάμε για να πάει στο αγαπημένο μου τραγούδι.
Έτσι, αν χτύπησα "Παίξε μου αγαπημένο τραγούδι «τώρα,
πρόκειται να φορτώσει μου αγαπημένο τραγούδι και να παίξετε it--
[ΜΟΥΣΙΚΗ - οι αετοί »ΖΩΗ ΣΤΗΝ ΓΡΗΓΟΡΑ ΜΟΝΟΠΆΤΙ"]
--which συμβαίνει να είναι "Η ζωή στην το Fast Lane "από τους The Eagles.
Τώρα, θα μπορούσα να χτυπήσει "Σταματήστε μου αγαπημένο τραγούδι »και επαναλαμβάνει.
>> [ΜΟΥΣΙΚΗ - οι αετοί »ΖΩΗ ΣΤΗΝ ΓΡΗΓΟΡΑ ΜΟΝΟΠΆΤΙ"]
>> Και αν πάω πάνω στην κονσόλα, γιατί Θα χρησιμοποιηθεί μια καθολική μεταβλητή εδώ
να παρακολουθείτε την τιμή αυτή, πράγματι Τώρα θα αναγνωρίζονται στην κονσόλα.
Έτσι αυτόματα δημιουργεί για μένα.
Έτσι, αυτό είναι που παίζει αυτή τη στιγμή, και μπορώ να απλά να καλέσετε source.stop ()
σε αυτό.
Λοιπόν, ξέρετε τι;
Ακριβώς έτσι εσείς έχετε ακούσει αυτό song-- μπορεί να αναγνωρίσει αυτό το τραγούδι.
>> [ΜΟΥΣΙΚΗ - RICK Astley, "ΠΟΤΕ GONNA GIVE ΕΣΎ ΠΆΝΩ"]
[ΜΟΥΣΙΚΗ - οι αετοί »ΖΩΗ ΣΤΗΝ ΓΡΗΓΟΡΑ ΜΟΝΟΠΆΤΙ"]
Έχουμε τώρα όλα έχουν Rickrolled.
Εντάξει, μεγάλη, κινείται.
Δροσερός.
Έτσι, αυτό είναι βασικά ένα παράδειγμα πόσο θα μπορούσε να φορτώσετε ένα MP3 file--
[ΜΟΥΣΙΚΗ - οι αετοί »ΖΩΗ ΣΤΗΝ ΓΡΗΓΟΡΑ ΜΟΝΟΠΆΤΙ"]
--and να παίξει, και να σταματήσει και να αρχίσει αυτό.
Θα μπορούσα να είχα κάνει πολλά περισσότερα [δεν ακούγεται]
>> Η τελευταία θα κάνω είναι, Θα σας δείξω ένα [δεν ακούγεται].
>> [Παίζει μουσική]
>> Είναι σαν, ogg.wave.mp3.
Νομίζω ότι, αν θυμάμαι καλά, Έχω τρέξει σε κάποια θέματα με .m4a,
αλλά δεν είμαι σίγουρος γι 'αυτό.
Νομίζω mp3.wave--
>> [ΜΟΥΣΙΚΗ - RICK Astley, "ΠΟΤΕ GONNA GIVE ΕΣΎ ΠΆΝΩ"]
>> Εντάξει μια χαρά.
Δεν θα έπρεπε να πει ότι.
Τέλος πάντων, γεια σου.
Έτσι έχουμε αυτή την ανοικτή.
Έτσι τώρα το μόνο που κάνω είναι, εγώ βασικά δημιουργήθηκε μια βασική σύνταξη για τη δημιουργία μουσικής.
Έτσι, αν κάνω κάτι σαν, προσθέστε g4 σε 1 2, αυτό σημαίνει ότι,
προσθέστε το σημείωμα πιάνο, G4, η οποία είναι η τέταρτη G
επάνω στο πιάνο από τον πυθμένα.
Έτσι, αυτό είναι το είδος του MIDI μιλούν, Έτσι, για όσους είναι με βάση τη μουσική,
αυτό είναι μόνο MIDI νότες.
>> Κοινό: Αυτό είναι το G της Μέσης C, έτσι δεν είναι;
>> Χιου Zabriskie: Αυτό είναι το G πάνω από το μέσο C, αυτό είναι σωστό.
>> Κοινό: Πάνω Μέση C.
>> Χιου Zabriskie: Ναι.
Στην πραγματικότητα, ναι.
Νομίζω ότι πραγματικά έκανε είναι ένα [δεν ακούγεται],
έτσι αυτό θα μπορούσε να είναι μια οκτάβα πάνω από αυτό.
Ας δούμε λοιπόν.
Αν χτύπησα Play--
[ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΠΙΑΝΟ ΣΗΜΕΙΩΣΗ]
--we're πρόκειται να το ακούω αυτό.
Η ιδέα είναι ότι λειτουργεί ακριβώς όπως μια γραμμή εντολών θα ήταν,
οπότε αν πάω πάνω και κάτω στο πληκτρολόγιό μου,
μπορεί να πάει πίσω στην προηγούμενη εντολές, το οποίο είναι αρκετά χρήσιμο.
Και παρακάτω είναι λίστα μου των κομματιών, τα οποία είναι όλα εκτελούνται στον βρόχο.
>> Κοινό: Θα ήταν αν υποτεθεί ότι η 88-κλειδί πληκτρολόγιο σε αυτό, έτσι δεν είναι;
>> Χιου Zabriskie: Το ερώτημα ήταν, είμαι υποθέτοντας ένα 88-κλειδί πληκτρολόγιο,
και ναι, είμαι.
Αυτό που έκανα εγώ είναι βασικά πήρε 88 δείγματα
του πιάνου, μία για κάθε νότα.
Και έτσι κάθε φορά που ακούσετε ένα σημείωμα από τώρα και στο εξής,
ότι είναι στην πραγματικότητα ένας βρόχος που μοιάζει like-- Αυτό παίρνει παίζεται σε βρόχο,
Έτσι, για κάθε νότα, αυτό λειτουργεί.
Αυτό που συμβαίνει είναι, δημιουργήσετε ξανά ένα ρυθμιστικό,
Έχω δημιουργήσει ένα κόμβο κέρδος για να ρυθμίσετε την ένταση του ήχου.
Αυτό ακριβώς μια πραγματικά πολύπλοκο τρόπο του λέγοντας ότι
αποθηκεύσετε το buffer σε source.buffer.
Δίνω το κέρδος, εγώ συνδέστε το με το κέρδος,
το κέρδος είναι συνδεδεμένο με το εξόδου, και στη συνέχεια να παίζω.
Έτσι, αυτό είναι το είδος της διαδικασίας από τη λήψη σε ένα ρυθμιστικό πηγή.
>> Κοινό: Μπορείς να λάβει πράγματι ότι ξηρό ήχο και να βραχεί [δεν ακούγεται];
>> Χιου Zabriskie: Μπορείτε, ναι.
Υπάρχει νέου ρήμα, υπάρχει καθυστέρηση, παραμόρφωση.
Μπορείτε να βάλετε σε βασικά τίποτα μεταξύ των εν λόγω σάντουιτς of-- καλά,
αγωγός είναι μια καλύτερη μεταφορά, αλλά μπορείτε να προσθέσετε κάτι σε αυτό.
Δροσερός.
>> Γι 'αυτό και θα τελειώσει το demo εδώ για να σας δώσει μια αίσθηση
μόνο ο απόλυτος αριθμός των φορών που να εκτελέσετε αυτή τη λειτουργία μονομιάς.
Έτσι, Πάω να καταργήσετε αυτό.
Πάω να δημιουργήσετε μια γεννήτρια that-- βασικά αυτό does-- αυτό είναι πραγματικά
το είδος της μια περίπλοκη syntax-- αλλά είναι πρόκειται να δημιουργήσει σημειώσεις σχετικά με την πετάξει,
και μόλις αρχίσετε να παίζετε τους, καθώς τους αξιολογεί.
[Παρεμβολή PIANO]
>> Έτσι, μπορούμε να κάνουμε λίγο μουσική εδώ.
[Παρεμβολή PIANO]
>> Λοιπόν, τι αυτή η εντολή κάνει, για παράδειγμα, είναι
αλλά δέχεται τα τρία σημειώματα για το πιάνο και στη συνέχεια τους βάζει σε Β3.
Αυτή η σύνταξη μπορεί να κάνει λίγο περισσότερο νόημα
σε εκείνους που έχουν μουσική υπόκρουση εδώ.
>> Μπορώ να προσθέσω μια μπότα.
Εγώ μπορώ--
>> [Παρεμβολή ΜΕΣΑ]
>> --just παίζουν με αυτό.
>> Έτσι, μπορείτε να make--
[Παρεμβολή ΜΕΣΑ]
Αυτό και μόνο είναι λίγο πιο ενοχλητικό.
[Παρεμβολή ΜΕΣΑ]
>> Έτσι ώστε να προσθέτει τυχαία ένα στεγνό κύμβαλο σε κάθε 16η σημείωμα, με το 16%
[ΜΗ ΑΚΟΥΣΤΌΣ].
>> [Παρεμβολή ΜΕΣΑ]
>> Ναι, έτσι ο τρόπος με τον works-- είναι πάντα σε 4: 4.
[Παρεμβολή ΜΕΣΑ]
>> Ναι, έτσι τα τέσσερα τρίμηνα, και 16/8.
[Παρεμβολή ΜΕΣΑ]
>> Έτσι, κατά μέσο όρο, μπορείτε να πάρετε το 60% επισκέψεις στο 16ο σημειώσεις.
>> Anyways, αυτό ήταν απλά είδος για να αναδείξουν
μερικά από τα πράγματα που θα μπορούσατε χτίσει με το Web Audio API.
Είναι πραγματικά ισχυρό, είναι πραγματικά γρήγορα, και μπορείτε να κάνετε πολλά δροσερά πράγματα
Με αυτό.
Έτσι και πάλι, οποιεσδήποτε ερωτήσεις έχετε, e-mail myself-- Hugh-- ή Σαμ,
και ειλικρινά, η Google έχει ένας τόνος των καλών πηγών.
Καμιά τελευταία ερώτηση;
Ναι.
>> Κοινό: Έτσι μπορείτε να έχετε πρόσβαση το ενσωματωμένο μικρόφωνο.
Τι και αν θα ήθελε να χρησιμοποιήστε ένα καλύτερο μικρόφωνο;
Χιου Zabriskie: Αν ήθελε για την καλύτερη χρήση του μικροφώνου;
Έτσι και πάλι, αυτό είναι μέρος του αφαίρεση μεταξύ Chrome
και το υπόλοιπο του υπολογιστή σας.
Αν δεν είναι διαθέσιμη μέσω του ένα API, όπως MIDI Web API,
θα μπορούσατε να βρείτε πιθανώς κάποιες αμυχές, αλλά γενικά δεν είναι εφικτό.
>> SAM ΠΡΑΣΙΝΟ: Μπορείτε να also-- όλα τα ξέρει Chrome
είναι ό, τι προεπιλεγμένη μικρόφωνο σας είναι, και αυτό τις προσβάσεις.
Έτσι, αν είχατε ένα μικρόφωνο θα μπορούσατε ορίσετε ως προεπιλογή το μικρόφωνο του υπολογιστή,
μπορείτε να έχετε πρόσβαση με αυτόν τον τρόπο και θα ήταν πιθανώς λειτουργήσει.
Χιου Zabriskie: Αυτό είναι ένα καλό σημείο.
Ποτέ δεν έχω δοκιμάσει αυτό, αλλά να είστε σε θέση να το είδος
of-- αν ανακατευθύνει την είσοδο μεγαφώνου, να είστε σε θέση να το κάνουμε αυτό, ναι.
>> Καμιά τελευταία ερώτηση;
Δροσερός.
Καλά σας ευχαριστήσω τόσο πολύ για την προσοχή.
Είμαι Hugh.
SAM ΠΡΑΣΙΝΟ: Είμαι Σαμ.
Χιου Zabriskie: Και αυτό είναι CS50.