Wavesurfer-WP Marker Demo

HTML

              
                <div class="wavesurfer-block">
  <div class="wavesurfer-player" data-wave-color="violet" data-progress-color="purple" data-url="https://dl.dropboxusercontent.com/s/egnsoqjtonvmhq8/SalmanKhan_2015P.mp3?dl=0" data-height="128">
  </div>
  <div class="wavesurfer-buttons_set">
    <button type="button" class="wavesurfer-play"><span>Play</span></button>
    <button class="wavesurfer-stop"><span>Stop</span></button>
    <button class="wavesurfer-mute"><span>Mute</span></button>
    <button class="wavesurfer-download"><a href="" download=""><span>Download</span></a></button>
    <button class="wavesurfer-loop"><span>Loop</span></button>
    <div class="wavesurfer-time"></div>
    <div class="wavesurfer-duration"></div>
  </div>
</div>

<p>New Marker Format Compatibilit: <span class="wavesurfer-marker" data-start="05:00,4"><code>05:00</code></span></p>

<div id="wavesurfer-transcript-#1" class="wavesurfer-transcript">
<p><span class="wavesurfer-marker" data-start="17.124" data-end="20.05">I'm here today to talk about the two ideas that,</span> <span class="wavesurfer-marker" data-start="20.073" data-end="22.431">at least based on my observations at Khan Academy,</span> <span class="wavesurfer-marker" data-start="22.456" data-end="26.334">are kind of the core, or the key leverage points for learning.</span></p>
<p><span class="wavesurfer-marker" data-start="26.358" data-end="28.374">And it's the idea of mastery</span> <span class="wavesurfer-marker" data-start="28.398" data-end="30.183">and the idea of mindset.</span></p>
<p><span class="wavesurfer-marker" data-start="30.207" data-end="33.041">I saw this in the early days working with my cousins.</span></p>
<p><span class="wavesurfer-marker" data-start="33.065" data-end="35.545">A lot of them were having trouble with math at first,</span> <span class="wavesurfer-marker" data-start="35.569" data-end="38.623">because they had all of these gaps accumulated in their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="38.647" data-end="41.636">And because of that, at some point they got to an algebra class</span> <span class="wavesurfer-marker" data-start="41.66" data-end="45.062">and they might have been a little bit shaky on some of the pre-algebra,</span> <span class="wavesurfer-marker" data-start="45.086" data-end="48.531">and because of that, they thought they didn't have the math gene.</span></p>
<p><span class="wavesurfer-marker" data-start="48.555" data-end="50.218">Or they'd get to a calculus class,</span> <span class="wavesurfer-marker" data-start="50.242" data-end="53.004">and they'd be a little bit shaky on the algebra.</span></p>
<p><span class="wavesurfer-marker" data-start="53.028" data-end="54.598">I saw it in the early days</span> <span class="wavesurfer-marker" data-start="54.622" data-end="58.15">when I was uploading some of those videos on YouTube,</span> <span class="wavesurfer-marker" data-start="58.174" data-end="61.451">and I realized that people who were not my cousins were watching.</span></p>
<p><span class="wavesurfer-marker" data-start="61.475" data-end="63.34">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="63.364" data-end="67.23">And at first, those comments were just simple thank-yous.</span></p>
<p><span class="wavesurfer-marker" data-start="67.254" data-end="69.223">I thought that was a pretty big deal.</span></p>
<p><span class="wavesurfer-marker" data-start="69.247" data-end="71.699">I don't know how much time you all spend on YouTube.</span></p>
<p><span class="wavesurfer-marker" data-start="71.723" data-end="73.81">Most of the comments are not "Thank you."</span></p>
<p><span class="wavesurfer-marker" data-start="73.834" data-end="75.291">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="75.315" data-end="76.953">They're a little edgier than that.</span></p>
<p><span class="wavesurfer-marker" data-start="76.977" data-end="79.408">But then the comments got a little more intense,</span> <span class="wavesurfer-marker" data-start="79.432" data-end="83.888">student after student saying that they had grown up not liking math.</span></p>
<p><span class="wavesurfer-marker" data-start="83.912" data-end="87.111">It was getting difficult as they got into more advanced math topics.</span></p>
<p><span class="wavesurfer-marker" data-start="87.135" data-end="88.663">By the time they got to algebra,</span> <span class="wavesurfer-marker" data-start="88.687" data-end="92.015">they had so many gaps in their knowledge they couldn't engage with it.</span></p>
<p><span class="wavesurfer-marker" data-start="92.039" data-end="94.112">They thought they didn't have the math gene.</span></p>
<p><span class="wavesurfer-marker" data-start="94.136" data-end="95.616">But when they were a bit older,</span> <span class="wavesurfer-marker" data-start="95.64" data-end="97.883">they took a little agency and decided to engage.</span></p>
<p><span class="wavesurfer-marker" data-start="97.907" data-end="99.759">They found resources like Khan Academy</span> <span class="wavesurfer-marker" data-start="99.783" data-end="102.933">and they were able to fill in those gaps and master those concepts,</span> <span class="wavesurfer-marker" data-start="102.957" data-end="105.547">and that reinforced their mindset that it wasn't fixed;</span> <span class="wavesurfer-marker" data-start="105.571" data-end="109.136">that they actually were capable of learning mathematics.</span></p>
<p><span class="wavesurfer-marker" data-start="109.16" data-end="113.213">And in a lot of ways, this is how you would master a lot of things in life.</span></p>
<p><span class="wavesurfer-marker" data-start="113.237" data-end="115.536">It's the way you would learn a martial art.</span></p>
<p><span class="wavesurfer-marker" data-start="115.56" data-end="118.726">In a martial art, you would practice the white belt skills</span> <span class="wavesurfer-marker" data-start="118.75" data-end="120.163">as long as necessary,</span> <span class="wavesurfer-marker" data-start="120.187" data-end="121.738">and only when you've mastered it</span> <span class="wavesurfer-marker" data-start="121.762" data-end="123.897">you would move on to become a yellow belt.</span></p>
<p><span class="wavesurfer-marker" data-start="123.921" data-end="125.992">It's the way you learn a musical instrument:</span> <span class="wavesurfer-marker" data-start="126.016" data-end="128.31">you practice the basic piece over and over again,</span> <span class="wavesurfer-marker" data-start="128.334" data-end="129.922">and only when you've mastered it,</span> <span class="wavesurfer-marker" data-start="129.946" data-end="131.617">you go on to the more advanced one.</span></p>
<p><span class="wavesurfer-marker" data-start="131.641" data-end="132.981">But what we point out --</span> <span class="wavesurfer-marker" data-start="133.005" data-end="137.49">this is not the way a traditional academic model is structured,</span> <span class="wavesurfer-marker" data-start="137.514" data-end="140.849">the type of academic model that most of us grew up in.</span></p>
<p><span class="wavesurfer-marker" data-start="140.873" data-end="142.415">In a traditional academic model,</span> <span class="wavesurfer-marker" data-start="142.439" data-end="144.858">we group students together, usually by age,</span> <span class="wavesurfer-marker" data-start="144.882" data-end="146.161">and around middle school,</span> <span class="wavesurfer-marker" data-start="146.185" data-end="148.031">by age and perceived ability,</span> <span class="wavesurfer-marker" data-start="148.055" data-end="150.613">and we shepherd them all together at the same pace.</span></p>
<p><span class="wavesurfer-marker" data-start="151.208" data-end="152.505">And what typically happens,</span> <span class="wavesurfer-marker" data-start="152.529" data-end="155.03">let's say we're in a middle school pre-algebra class,</span> <span class="wavesurfer-marker" data-start="155.054" data-end="156.848">and the current unit is on exponents,</span> <span class="wavesurfer-marker" data-start="156.872" data-end="159.062">the teacher will give a lecture on exponents,</span> <span class="wavesurfer-marker" data-start="159.086" data-end="161.371">then we'll go home, do some homework.</span></p>
<p><span class="wavesurfer-marker" data-start="161.395" data-end="163.449">The next morning, we'll review the homework,</span> <span class="wavesurfer-marker" data-start="163.473" data-end="165.821">then another lecture, homework, lecture, homework.</span></p>
<p><span class="wavesurfer-marker" data-start="165.845" data-end="168.106">That will continue for about two or three weeks,</span> <span class="wavesurfer-marker" data-start="168.13" data-end="169.305">and then we get a test.</span></p>
<p><span class="wavesurfer-marker" data-start="169.329" data-end="172.647">On that test, maybe I get a 75 percent,</span> <span class="wavesurfer-marker" data-start="172.671" data-end="174.088">maybe you get a 90 percent,</span> <span class="wavesurfer-marker" data-start="174.112" data-end="176.096">maybe you get a 95 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="176.12" data-end="178.867">And even though the test identified gaps in our knowledge,</span> <span class="wavesurfer-marker" data-start="178.891" data-end="180.85">I didn't know 25 percent of the material.</span></p>
<p><span class="wavesurfer-marker" data-start="180.874" data-end="183.846">Even the A student, what was the five percent they didn't know?</span></p>
<p><span class="wavesurfer-marker" data-start="183.87" data-end="185.683">Even though we've identified the gaps,</span> <span class="wavesurfer-marker" data-start="185.707" data-end="188.245">the whole class will then move on to the next subject,</span> <span class="wavesurfer-marker" data-start="188.269" data-end="191.671">probably a more advanced subject that's going to build on those gaps.</span></p>
<p><span class="wavesurfer-marker" data-start="191.695" data-end="195.068">It might be logarithms or negative exponents.</span></p>
<p><span class="wavesurfer-marker" data-start="195.092" data-end="198.123">And that process continues, and you immediately start to realize</span> <span class="wavesurfer-marker" data-start="198.147" data-end="199.322">how strange this is.</span></p>
<p><span class="wavesurfer-marker" data-start="199.346" data-end="202.117">I didn't know 25 percent of the more foundational thing,</span> <span class="wavesurfer-marker" data-start="202.141" data-end="204.586">and now I'm being pushed to the more advanced thing.</span></p>
<p><span class="wavesurfer-marker" data-start="204.61" data-end="208.322">And this will continue for months, years, all the way until at some point,</span> <span class="wavesurfer-marker" data-start="208.346" data-end="210.786">I might be in an algebra class or trigonometry class</span> <span class="wavesurfer-marker" data-start="210.81" data-end="212.067">and I hit a wall.</span></p>
<p><span class="wavesurfer-marker" data-start="212.091" data-end="214.745">And it's not because algebra is fundamentally difficult</span> <span class="wavesurfer-marker" data-start="214.769" data-end="218.761">or because the student isn't bright.</span></p>
<p><span class="wavesurfer-marker" data-start="218.785" data-end="222.096">It's because I'm seeing an equation and they're dealing with exponents</span> <span class="wavesurfer-marker" data-start="222.12" data-end="224.849">and that 30 percent that I didn't know is showing up.</span></p>
<p><span class="wavesurfer-marker" data-start="224.873" data-end="227.702">And then I start to disengage.</span></p>
<p><span class="wavesurfer-marker" data-start="228.639" data-end="232.065">To appreciate how absurd that is,</span> <span class="wavesurfer-marker" data-start="232.089" data-end="234.834">imagine if we did other things in our life that way.</span></p>
<p><span class="wavesurfer-marker" data-start="235.294" data-end="236.748">Say, home-building.</span></p>
<p><span class="wavesurfer-marker" data-start="236.772" data-end="239.445">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="241.048" data-end="244.442">So we bring in the contractor and say,</span> <span class="wavesurfer-marker" data-start="244.466" data-end="247.014">"We were told we have two weeks to build a foundation.</span></p>
<p><span class="wavesurfer-marker" data-start="247.038" data-end="248.374">Do what you can."</span></p>
<p><span class="wavesurfer-marker" data-start="248.398" data-end="250.701">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="251.155" data-end="252.947">So they do what they can.</span></p>
<p><span class="wavesurfer-marker" data-start="252.971" data-end="254.127">Maybe it rains.</span></p>
<p><span class="wavesurfer-marker" data-start="254.151" data-end="256.12">Maybe some of the supplies don't show up.</span></p>
<p><span class="wavesurfer-marker" data-start="256.144" data-end="259.454">And two weeks later, the inspector comes, looks around,</span> <span class="wavesurfer-marker" data-start="259.478" data-end="262.143">says, "OK, the concrete is still wet right over there,</span> <span class="wavesurfer-marker" data-start="262.167" data-end="264.019">that part's not quite up to code ...</span></p>
<p><span class="wavesurfer-marker" data-start="265.008" data-end="266.366">I'll give it an 80 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="266.39" data-end="267.454">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="267.478" data-end="270.213">You say, "Great! That's a C. Let's build the first floor."</span></p>
<p><span class="wavesurfer-marker" data-start="270.237" data-end="271.255">(Laughter)</span></p>
<p><span class="wavesurfer-marker" data-start="271.279" data-end="272.433">Same thing.</span></p>
<p><span class="wavesurfer-marker" data-start="272.457" data-end="276.296">We have two weeks, do what you can, inspector shows up, it's a 75 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="276.32" data-end="277.479">Great, that's a D-plus.</span></p>
<p><span class="wavesurfer-marker" data-start="277.503" data-end="278.749">Second floor, third floor,</span> <span class="wavesurfer-marker" data-start="278.773" data-end="281.551">and all of a sudden, while you're building the third floor,</span> <span class="wavesurfer-marker" data-start="281.575" data-end="283.011">the whole structure collapses.</span></p>
<p><span class="wavesurfer-marker" data-start="283.035" data-end="286.279">And if your reaction is the reaction you typically have in education,</span> <span class="wavesurfer-marker" data-start="286.303" data-end="287.644">or that a lot of folks have,</span> <span class="wavesurfer-marker" data-start="287.668" data-end="289.774">you might say, maybe we had a bad contractor,</span> <span class="wavesurfer-marker" data-start="289.798" data-end="292.891">or maybe we needed better inspection or more frequent inspection.</span></p>
<p><span class="wavesurfer-marker" data-start="292.915" data-end="295.164">But what was really broken was the process.</span></p>
<p><span class="wavesurfer-marker" data-start="295.188" data-end="298.217">We were artificially constraining how long we had to something,</span> <span class="wavesurfer-marker" data-start="298.241" data-end="300.614">pretty much ensuring a variable outcome,</span> <span class="wavesurfer-marker" data-start="300.638" data-end="304.162">and we took the trouble of inspecting and identifying those gaps,</span> <span class="wavesurfer-marker" data-start="304.186" data-end="306.119">but then we built right on top of it.</span></p>
<p><span class="wavesurfer-marker" data-start="306.143" data-end="309.08">So the idea of mastery learning is to do the exact opposite.</span></p>
<p><span class="wavesurfer-marker" data-start="309.104" data-end="311.572">Instead of artificially constraining, fixing</span> <span class="wavesurfer-marker" data-start="311.596" data-end="313.584">when and how long you work on something,</span> <span class="wavesurfer-marker" data-start="313.608" data-end="315.826">pretty much ensuring that variable outcome,</span> <span class="wavesurfer-marker" data-start="315.85" data-end="317.523">the A, B, C, D, F --</span> <span class="wavesurfer-marker" data-start="318.15" data-end="319.634">do it the other way around.</span></p>
<p><span class="wavesurfer-marker" data-start="320.014" data-end="321.806">What's variable is when and how long</span> <span class="wavesurfer-marker" data-start="321.83" data-end="323.924">a student actually has to work on something,</span> <span class="wavesurfer-marker" data-start="323.948" data-end="327.195">and what's fixed is that they actually master the material.</span></p>
<p><span class="wavesurfer-marker" data-start="327.615" data-end="329.266">And it's important to realize</span> <span class="wavesurfer-marker" data-start="329.29" data-end="332.655">that not only will this make the student learn their exponents better,</span> <span class="wavesurfer-marker" data-start="332.679" data-end="335.637">but it'll reinforce the right mindset muscles.</span></p>
<p><span class="wavesurfer-marker" data-start="335.661" data-end="339.089">It makes them realize that if you got 20 percent wrong on something,</span> <span class="wavesurfer-marker" data-start="339.113" data-end="342.502">it doesn't mean that you have a C branded in your DNA somehow.</span></p>
<p><span class="wavesurfer-marker" data-start="342.526" data-end="344.96">It means that you should just keep working on it.</span></p>
<p><span class="wavesurfer-marker" data-start="344.984" data-end="347.476">You should have grit; you should have perseverance;</span> <span class="wavesurfer-marker" data-start="347.5" data-end="349.641">you should take agency over your learning.</span></p>
<p><span class="wavesurfer-marker" data-start="350.078" data-end="353.068">Now, a lot of skeptics might say, well, hey, this is all great,</span> <span class="wavesurfer-marker" data-start="353.092" data-end="355.813">philosophically, this whole idea of mastery-based learning</span> <span class="wavesurfer-marker" data-start="355.837" data-end="357.273">and its connection to mindset,</span> <span class="wavesurfer-marker" data-start="357.297" data-end="359.396">students taking agency over their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="359.42" data-end="362.555">It makes a lot of sense, but it seems impractical.</span></p>
<p><span class="wavesurfer-marker" data-start="362.579" data-end="365.976">To actually do it, every student would be on their own track.</span></p>
<p><span class="wavesurfer-marker" data-start="366" data-end="367.624">It would have to be personalized,</span> <span class="wavesurfer-marker" data-start="367.648" data-end="370.83">you'd have to have private tutors and worksheets for every student.</span></p>
<p><span class="wavesurfer-marker" data-start="370.854" data-end="372.353">And these aren't new ideas --</span> <span class="wavesurfer-marker" data-start="372.377" data-end="375.203">there were experiments in Winnetka, Illinois, 100 years ago,</span> <span class="wavesurfer-marker" data-start="375.227" data-end="378.045">where they did mastery-based learning and saw great results,</span> <span class="wavesurfer-marker" data-start="378.069" data-end="381.366">but they said it wouldn't scale because it was logistically difficult.</span></p>
<p><span class="wavesurfer-marker" data-start="381.39" data-end="384.297">The teacher had to give different worksheets to every student,</span> <span class="wavesurfer-marker" data-start="384.321" data-end="385.609">give on-demand assessments.</span></p>
<p><span class="wavesurfer-marker" data-start="385.633" data-end="387.894">But now today, it's no longer impractical.</span></p>
<p><span class="wavesurfer-marker" data-start="387.918" data-end="389.284">We have the tools to do it.</span></p>
<p><span class="wavesurfer-marker" data-start="389.308" data-end="391.903">Students see an explanation at their own time and pace?</span></p>
<p><span class="wavesurfer-marker" data-start="391.927" data-end="393.522">There's on-demand video for that.</span></p>
<p><span class="wavesurfer-marker" data-start="393.546" data-end="395.618">They need practice? They need feedback?</span></p>
<p><span class="wavesurfer-marker" data-start="395.642" data-end="400.082">There's adaptive exercises readily available for students.</span></p>
<p><span class="wavesurfer-marker" data-start="400.481" data-end="403.075">And when that happens, all sorts of neat things happen.</span></p>
<p><span class="wavesurfer-marker" data-start="403.099" data-end="405.872">One, the students can actually master the concepts,</span> <span class="wavesurfer-marker" data-start="405.896" data-end="408.091">but they're also building their growth mindset,</span> <span class="wavesurfer-marker" data-start="408.115" data-end="409.912">they're building grit, perseverance,</span> <span class="wavesurfer-marker" data-start="409.936" data-end="411.959">they're taking agency over their learning.</span></p>
<p><span class="wavesurfer-marker" data-start="411.983" data-end="414.54">And all sorts of beautiful things can start to happen</span> <span class="wavesurfer-marker" data-start="414.564" data-end="416.2">in the actual classroom.</span></p>
<p><span class="wavesurfer-marker" data-start="416.224" data-end="418.282">Instead of it being focused on the lecture,</span> <span class="wavesurfer-marker" data-start="418.306" data-end="420.124">students can interact with each other.</span></p>
<p><span class="wavesurfer-marker" data-start="420.148" data-end="422.306">They can get deeper mastery over the material.</span></p>
<p><span class="wavesurfer-marker" data-start="422.33" data-end="424.683">They can go into simulations, Socratic dialogue.</span></p>
<p><span class="wavesurfer-marker" data-start="424.707" data-end="427.386">To appreciate what we're talking about</span> <span class="wavesurfer-marker" data-start="427.41" data-end="431.457">and the tragedy of lost potential here,</span> <span class="wavesurfer-marker" data-start="431.481" data-end="434.624">I'd like to give a little bit of a thought experiment.</span></p>
<p><span class="wavesurfer-marker" data-start="435.155" data-end="440.221">If we were to go 400 years into the past to Western Europe,</span> <span class="wavesurfer-marker" data-start="440.245" data-end="443.409">which even then, was one of the more literate parts of the planet,</span> <span class="wavesurfer-marker" data-start="443.433" data-end="447.16">you would see that about 15 percent of the population knew how to read.</span></p>
<p><span class="wavesurfer-marker" data-start="447.726" data-end="451.364">And I suspect that if you asked someone who did know how to read,</span> <span class="wavesurfer-marker" data-start="451.388" data-end="453.284">say a member of the clergy,</span> <span class="wavesurfer-marker" data-start="453.308" data-end="456.92">"What percentage of the population do you think is even capable of reading?"</span></p>
<p><span class="wavesurfer-marker" data-start="456.944" data-end="460.505">They might say, "Well, with a great education system,</span> <span class="wavesurfer-marker" data-start="460.529" data-end="462.773">maybe 20 or 30 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="463.594" data-end="465.181">But if you fast forward to today,</span> <span class="wavesurfer-marker" data-start="465.205" data-end="468.22">we know that that prediction would have been wildly pessimistic,</span> <span class="wavesurfer-marker" data-start="468.244" data-end="472.369">that pretty close to 100 percent of the population is capable of reading.</span></p>
<p><span class="wavesurfer-marker" data-start="472.393" data-end="474.944">But if I were to ask you a similar question:</span> <span class="wavesurfer-marker" data-start="475.664" data-end="479.203">"What percentage of the population do you think is capable</span> <span class="wavesurfer-marker" data-start="479.227" data-end="482.1">of truly mastering calculus,</span> <span class="wavesurfer-marker" data-start="482.124" data-end="485.137">or understanding organic chemistry,</span> <span class="wavesurfer-marker" data-start="485.161" data-end="488.447">or being able to contribute to cancer research?"</span></p>
<p><span class="wavesurfer-marker" data-start="488.471" data-end="491.368">A lot of you might say, "Well, with a great education system,</span> <span class="wavesurfer-marker" data-start="491.392" data-end="493.414">maybe 20, 30 percent."</span></p>
<p><span class="wavesurfer-marker" data-start="493.948" data-end="495.261">But what if that estimate</span> <span class="wavesurfer-marker" data-start="495.285" data-end="498.672">is just based on your own experience in a non-mastery framework,</span> <span class="wavesurfer-marker" data-start="498.696" data-end="501.528">your own experience with yourself or observing your peers,</span> <span class="wavesurfer-marker" data-start="501.552" data-end="504.341">where you're being pushed at this set pace through classes,</span> <span class="wavesurfer-marker" data-start="504.365" data-end="505.704">accumulating all these gaps?</span></p>
<p><span class="wavesurfer-marker" data-start="505.728" data-end="507.369">Even when you got that 95 percent,</span> <span class="wavesurfer-marker" data-start="507.393" data-end="509.205">what was that five percent you missed?</span></p>
<p><span class="wavesurfer-marker" data-start="509.229" data-end="511.956">And it keeps accumulating -- you get to an advanced class,</span> <span class="wavesurfer-marker" data-start="511.98" data-end="513.852">all of a sudden you hit a wall and say,</span> <span class="wavesurfer-marker" data-start="513.876" data-end="515.879">"I'm not meant to be a cancer researcher;</span> <span class="wavesurfer-marker" data-start="515.903" data-end="518.831">not meant to be a physicist; not meant to be a mathematician."</span></p>
<p><span class="wavesurfer-marker" data-start="518.855" data-end="520.832">I suspect that that actually is the case,</span> <span class="wavesurfer-marker" data-start="520.856" data-end="524.682">but if you were allowed to be operating in a mastery framework,</span> <span class="wavesurfer-marker" data-start="524.706" data-end="528.123">if you were allowed to really take agency over your learning,</span> <span class="wavesurfer-marker" data-start="528.147" data-end="529.743">and when you get something wrong,</span> <span class="wavesurfer-marker" data-start="529.767" data-end="532.559">embrace it -- view that failure as a moment of learning --</span> <span class="wavesurfer-marker" data-start="532.583" data-end="536.54">that number, the percent that could really master calculus</span> <span class="wavesurfer-marker" data-start="536.564" data-end="538.324">or understand organic chemistry,</span> <span class="wavesurfer-marker" data-start="538.348" data-end="540.85">is actually a lot closer to 100 percent.</span></p>
<p><span class="wavesurfer-marker" data-start="541.771" data-end="544.628">And this isn't even just a "nice to have."</span></p>
<p><span class="wavesurfer-marker" data-start="545.189" data-end="547.252">I think it's a social imperative.</span></p>
<p><span class="wavesurfer-marker" data-start="547.681" data-end="551.532">We're exiting what you could call the industrial age</span> <span class="wavesurfer-marker" data-start="551.556" data-end="555.36">and we're going into this information revolution.</span></p>
<p><span class="wavesurfer-marker" data-start="555.816" data-end="557.99">And it's clear that some things are happening.</span></p>
<p><span class="wavesurfer-marker" data-start="558.014" data-end="560.127">In the industrial age, society was a pyramid.</span></p>
<p><span class="wavesurfer-marker" data-start="560.151" data-end="564.803">At the base of the pyramid, you needed human labor.</span></p>
<p><span class="wavesurfer-marker" data-start="565.255" data-end="568.588">In the middle of the pyramid, you had an information processing,</span> <span class="wavesurfer-marker" data-start="568.612" data-end="570.21">a bureaucracy class,</span> <span class="wavesurfer-marker" data-start="570.234" data-end="573.908">and at the top of the pyramid, you had your owners of capital</span> <span class="wavesurfer-marker" data-start="573.932" data-end="575.931">and your entrepreneurs</span> <span class="wavesurfer-marker" data-start="575.955" data-end="577.407">and your creative class.</span></p>
<p><span class="wavesurfer-marker" data-start="578.074" data-end="579.87">But we know what's happening already,</span> <span class="wavesurfer-marker" data-start="579.894" data-end="581.909">as we go into this information revolution.</span></p>
<p><span class="wavesurfer-marker" data-start="581.933" data-end="584.886">The bottom of that pyramid, automation, is going to take over.</span></p>
<p><span class="wavesurfer-marker" data-start="584.91" data-end="587.235">Even that middle tier, information processing,</span> <span class="wavesurfer-marker" data-start="587.259" data-end="588.885">that's what computers are good at.</span></p>
<p><span class="wavesurfer-marker" data-start="588.909" data-end="590.656">So as a society, we have a question:</span> <span class="wavesurfer-marker" data-start="590.68" data-end="593.798">All this new productivity is happening because of this technology,</span> <span class="wavesurfer-marker" data-start="593.822" data-end="595.152">but who participates in it?</span></p>
<p><span class="wavesurfer-marker" data-start="595.176" data-end="598.371">Is it just going to be that very top of the pyramid, in which case,</span> <span class="wavesurfer-marker" data-start="598.395" data-end="599.736">what does everyone else do?</span></p>
<p><span class="wavesurfer-marker" data-start="599.76" data-end="600.926">How do they operate?</span></p>
<p><span class="wavesurfer-marker" data-start="600.95" data-end="603.37">Or do we do something that's more aspirational?</span></p>
<p><span class="wavesurfer-marker" data-start="603.751" data-end="606.861">Do we actually attempt to invert the pyramid,</span> <span class="wavesurfer-marker" data-start="606.885" data-end="608.886">where you have a large creative class,</span> <span class="wavesurfer-marker" data-start="608.91" data-end="612.591">where almost everyone can participate as an entrepreneur,</span> <span class="wavesurfer-marker" data-start="612.615" data-end="614.56">an artist, as a researcher?</span></p>
<p><span class="wavesurfer-marker" data-start="615.02" data-end="616.95">And I don't think that this is utopian.</span></p>
<p><span class="wavesurfer-marker" data-start="616.974" data-end="619.338">I really think that this is all based on the idea</span> <span class="wavesurfer-marker" data-start="619.362" data-end="621.546">that if we let people tap into their potential</span> <span class="wavesurfer-marker" data-start="621.57" data-end="623.534">by mastering concepts,</span> <span class="wavesurfer-marker" data-start="623.558" data-end="627.135">by being able to exercise agency over their learning,</span> <span class="wavesurfer-marker" data-start="627.159" data-end="628.501">that they can get there.</span></p>
<p><span class="wavesurfer-marker" data-start="628.842" data-end="632.842">And when you think of it as just a citizen of the world,</span> <span class="wavesurfer-marker" data-start="632.866" data-end="634.129">it's pretty exciting.</span></p>
<p><span class="wavesurfer-marker" data-start="634.153" data-end="636.781">I mean, think about the type of equity we can we have,</span> <span class="wavesurfer-marker" data-start="636.805" data-end="640.009">and the rate at which civilization could even progress.</span></p>
<p><span class="wavesurfer-marker" data-start="640.509" data-end="642.722">And so, I'm pretty optimistic about it.</span></p>
<p><span class="wavesurfer-marker" data-start="642.746" data-end="646.309">I think it's going to be a pretty exciting time to be alive.</span></p>
<p><span class="wavesurfer-marker" data-start="646.333" data-end="647.499">Thank you.</span></p>
<p><span class="wavesurfer-marker" data-start="647.523" data-end="653">(Applause)</span></p>
</div>

CSS

              
                /**
 * WaveSurfer-WP Flat Icons Theme
 * Author: X-Raym
 * Author URl: http://www.extremraym.com
 * Date: 2016-03-15
 * Version: 2.2
 */

.wavesurfer-block {
  box-sizing: border-box;
	margin-bottom: 2em;
}

.wavesurfer-player wave {
  z-index: 0;
}

.wavesurfer-player canvas {
  max-width: none;
}

.wavesurfer-buttons_set {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

.wavesurfer-buttons_set button {
  width: 50px;
}

.wavesurfer-block button:hover {
  cursor: pointer;
  opacity: 0.7;
}

.wavesurfer-block button,
.wavesurfer-time,
.wavesurfer-duration {
  font-family: Arial;
  font-size: 1em;
  margin: 1em 1em 1em;
  padding: 0.5em 1em 0.5em;
  border-width: 0;
  outline: none;
  background-color: #2ecc71;
  transition: .3s ease all;
  color: white;
  font-weight: bold;
  /*
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
	*/
}

.wavesurfer-download a {
  color: white;
  text-decoration: none;
}

.wavesurfer-time,
.wavesurfer-duration {
  font-family: Arial;
  background-color: #4444F0;
}

button.wavesurfer-active-button {
  background-color: #FF4081;
}

button.wavesurfer-paused-button {
  background-color: #FFB642;
}

.wavesurfer-buttons_set button:before,
.wavesurfer-buttons_set div:before {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
  width: 1em;
}

.wavesurfer-time:before,
.wavesurfer-duration:before {
  padding-right: 0.3em;
}

button.wavesurfer-play:before {
  content: "\f04b";
}

button.wavesurfer-play.wavesurfer-active-button:before {
  content: "\f04c";
}

button.wavesurfer-paused-button:before {
  content: "\f04b";
  padding-right: 0em;
}

button.wavesurfer-stop:before {
  content: "\f04d";
}

div.wavesurfer-time:before {
  content: "\f041";
}

div.wavesurfer-duration:before {
  content: "\f017";
}

button.wavesurfer-download:before {
  content: "\f019";
}

button.wavesurfer-loop:before {
  content: "\f061";
}

button.wavesurfer-loop.wavesurfer-active-button:before {
  content: "\f01e";
}

button.wavesurfer-mute:before {
  content: "\f028";
  padding-right: 4.5px;
}

button.wavesurfer-mute.wavesurfer-active-button:before {
  content: "\f026\f00d";
  padding-right: 0px;
}

.wavesurfer-time {
  margin-left: Auto;
}

@media (max-width: 550px) {
  .wavesurfer-duration {
    display: none;
  }
  .wavesurfer-time {
    display: none;
  }
}

.wavesurfer-block button span,
.wavesurfer-time span,
.wavesurfer-duration span {
  padding-left: 0.3em;
  display: none;
}

.wavesurfer-block wave:hover{
  cursor:pointer;
}

/* Playlist */
.wavesurfer-list-group {
  counter-reset: section;
  list-style-type: none;
	padding: 0;
	margin-left: 1em;
	margin-right: 1em;
}

.wavesurfer-list-group li:hover{
  cursor:pointer;
}

.wavesurfer-list-group li:before {
  counter-increment: section;
  content: counters(section, ".") ". ";
}

.wavesurfer-active-track {
  background: rgba(0, 0, 0, 0.2);
}

.wavesurfer-list-group li.wavesurfer-active-track:before {
  counter-increment: section;
  content: counters(section, ".") ". ";
}

#waveform {
  position: relative;
}

.wavesurfer-progress {
  position:relative;
	display: none; /* since 2.2 */
}

.wavesurfer-loading[value] {
  border: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) inset;
  position: absolute;
  z-index: 10;
  margin-top: -80px;
}


.wavesurfer-marker:hover {
  cursor: pointer;
  text-decoration: underline;
}

.wavesurfer-marker-current {
  background: rgba(126, 126, 126, 0.4);
}

/* Subtitles style:*/
/*
.wavesurfer-marker {
  display: none;
}

.wavesurfer-marker-current {
  display: block;
  background: rgba(126, 126, 126, 0.4);
}*/

JS

              
                /**
 * WaveSurfer-WP Front-End Script
 * Author: X-Raym
 * Author URl: https://www.extremraym.com
 * Date: 2016-10-07
 * Version: 2.5
 */

// No conflict for WordPress
var $j = jQuery.noConflict();

// Init table for storing wavesurfer objects
var wavesurfer = [];
var markers = [];

// On Document Ready and Ajax Complete
$j(document).on('ready', function() { // NOTE :  ajaxComplete
  if ($j('#wavesurfer-player-0').find('canvas').length === 0) {
    WaveSurferInit();
  }
});

$j(document).on(' ready wavesurfer-wp-init wavesurfer-markers-init', function() { // 
    MarkerInit();
});
/* FUNCTIONS */

// WaveSurfer Init
function WaveSurferInit() {

  // Loop in each wavesurfer block
  $j('.wavesurfer-block').each(function(i) {

    // Get WaveSurfer block for datas attribute
    var container = $j(this).children('.wavesurfer-player');
    var split = container.data('split-channels');

    // Wavesurfer block object
    var object = this;

    var hash = container.data('hash');

    init(i, container, object, hash, split);

  }); // End loop in each wavesurfer-block

} // End function WaveSurferInit

function init(i, container, object, hash, split) {

  // Text selector for the player
  var selector = '#wavesurfer-player-' + i;

  // Add unique ID to WaveSurfer Block
  container.attr('id', 'wavesurfer-player-' + i);

  // Get data attribute
  var wave_color = container.data('wave-color');
  var progress_color = container.data('progress-color');
  var cursor_color = container.data('cursor-color');
  var file_url = container.data('url');
  var height = container.data('height');

  // Init and Control
  var options = {
    container: selector,
    splitChannels: split,
    waveColor: wave_color,
    progressColor: progress_color,
    cursorColor: cursor_color,
    backend: 'MediaElement',
    height: height
  };

  // Create WaveSurfer object
  wavesurfer[i] = WaveSurfer.create(options);

  // File
  wavesurfer[i].load(file_url);

  // Responsive Waveform
  $j(window).resize(function() {
    wavesurfer[i].drawer.containerWidth = wavesurfer[i].drawer.container.clientWidth;
    wavesurfer[i].drawBuffer();
  });

  // Buttons

  // Timecode blocks
  var timeblock = $j(object).find('.wavesurfer-time');
  var duration = $j(object).find('.wavesurfer-duration');

  // Controls Definition
  var buttonPlay = $j(object).find('button.wavesurfer-play');
  var buttonStop = $j(object).find('button.wavesurfer-stop');
  var buttonMute = $j(object).find('button.wavesurfer-mute');
  var buttonDownload = $j(object).find('button.wavesurfer-download');
  var buttonLoop = $j(object).find('button.wavesurfer-loop');
  var debugBlock = $j(object).find('.debug');
  var progressBar = $j(object).find('progress');

  wavesurfer[i].on('error', function() {
    progressBar.hide();
  });

  // Timecode during Play
  wavesurfer[i].on('audioprocess', function() {
    var current_time = wavesurfer[i].getCurrentTime();
    timeblock.html(secondsTimeSpanToMS(current_time));
    $j.each(markers[i], function(i) {
      if (current_time >= this.time_start && current_time <= this.time_end) {
        $j(this.dom).addClass("wavesurfer-marker-current");
      } else {
        $j(this.dom).removeClass("wavesurfer-marker-current");
      }
    });
  });

  // Timecode and duration at Ready
  wavesurfer[i].on('ready', function() {
    progressBar.hide();
    var audio_duration = wavesurfer[i].getDuration();
    duration.html(secondsTimeSpanToMS(audio_duration));
    var current_time = wavesurfer[i].getCurrentTime();
    timeblock.html(secondsTimeSpanToMS(current_time));
  });

  // Timecode during pause + seek
  wavesurfer[i].on('seek', function() {
    var current_time = wavesurfer[i].getCurrentTime();
    timeblock.html(secondsTimeSpanToMS(current_time));
  });

  // Add Active class on all stop button at init stage
  buttonStop.addClass('wavesurfer-active-button');

  // Controls Functions
  buttonPlay.click(function() {

    wavesurfer[i].playPause();

    // IF PLAYING -> TO PAUSE
    if ($j(this).hasClass('wavesurfer-active-button')) {

      SetPauseButton(this);

    } else {
      // IS NOT PLAYING -> TO PLAY

      PauseOtherPlayers(wavesurfer, i);

      $j(this).children('span').text(wavesurfer_localize.pause);

      // Add an active class
      $j(this).addClass('wavesurfer-active-button');

      // Remove active class from the other buttons
      $j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
      $j(this).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
    }

  });
  buttonStop.click(function() {
    wavesurfer[i].stop();

    if (!$j(this).hasClass('wavesurfer-active-button')) {

      $j(this).addClass('wavesurfer-active-button');
      $j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
      $j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
      $j(this).parent().children('button.wavesurfer-play').children('span').text(wavesurfer_localize.play);
      var current_time = wavesurfer[i].getCurrentTime();
      timeblock.html(secondsTimeSpanToMS(current_time));
    }
  });

  // Button Mute
  buttonMute.click(function() {
    wavesurfer[i].toggleMute();

    // IF ACTIVE
    if ($j(this).hasClass('wavesurfer-active-button')) {
      $j(this).removeClass('wavesurfer-active-button');
      $j(this).children('span').text(wavesurfer_localize.mute);
    } else {
      $j(this).addClass('wavesurfer-active-button');
      $j(this).children('span').text(wavesurfer_localize.unmute);
    }

  });

  // Define Stop button
  buttonDownload.click(function() {
    var audio = $j(this).parent().parent('.wavesurfer-block').children('.wavesurfer-player');

    var download_url = audio.data('url');
    // Get FileName from URL
    var index = download_url.lastIndexOf("/") + 1;
    var file_name = download_url.substr(index);
    $j(this).children('a').attr('href', download_url);
    $j(this).children('a').attr('download', file_name);

    // then download
    download(download_url);
  });

  // On finish, remove active class on play
  wavesurfer[i].on('finish', function() {
    if (buttonLoop.hasClass('wavesurfer-active-button') === false) {
      buttonPlay.removeClass('wavesurfer-active-button');
      buttonStop.addClass('wavesurfer-active-button');
    }
  });

  // Button Loop
  buttonLoop.click(function() {
    // IF LOOP
    if ($j(this).hasClass('wavesurfer-active-button')) {
      $j(this).removeClass('wavesurfer-active-button');
      $j(this).children('span').text(wavesurfer_localize.loop);
      wavesurfer[i].on('finish', function() {
        wavesurfer[i].pause();
      });
    } else {
      $j(this).addClass('wavesurfer-active-button');
      $j(this).children('span').text(wavesurfer_localize.unloop);
      wavesurfer[i].on('finish', function() {
        wavesurfer[i].play();
      });
    }
  });

  // Check if playlist
  if ($j(object).hasClass('wavesurfer-playlist')) {

    // The playlist list
    var tracks = $j(object).find('.wavesurfer-list-group li');

    // Set the first track as active at init
    var current = 0;
    tracks.eq(current).addClass('wavesurfer-active-track');

    // When cliking on an item
    tracks.click(function() {
      //console.log('Clicked Track:', current, tracks);
      if ($j(this).hasClass('wavesurfer-active-track') === false) {

        // Remove active track class to all tracks
        tracks.each(function() {
          $j(this).removeClass('wavesurfer-active-track');
        });

        // Add active track class
        $j(this).addClass('wavesurfer-active-track');

        file_url = $j(this).data('url');
        current = $j(this).index();

        hash = $j(this).data('hash');

        // Load sound and waveform
        wavesurfer[i].load(file_url);

        wavesurfer[i].on('ready', function() {
          if (buttonPlay.hasClass('wavesurfer-active-button')) {
            wavesurfer[i].play();
          }
        });
      }

    }); // END click track

    wavesurfer[i].on('finish', function() {

      if (buttonLoop.hasClass('wavesurfer-active-button')) {
        wavesurfer[i].play();
      } else {
        // Increment current track number
        current++;

        // Get track URL
        var url = '';
        url = tracks.eq(current).data('url');
        // If there no other tracks after
        if (url !== undefined) {
          wavesurfer[i].load(url);
          progressBar.attr('value', '0');
          // progressBar.show(); -- hidden since 2.2 for BackEnd element

          // Remove active tracks from all tracks
          wavesurfer[i].on('loading', function(percent) {
            progressBar.attr('value', percent);
          });

          tracks.eq(current - 1).removeClass('wavesurfer-active-track');
          tracks.eq(current).addClass('wavesurfer-active-track');

          buttonDownload.parent().parent('.wavesurfer-block').children('.wavesurfer-player').data('url', url);
          // Check if continuous PLay is on.
          // TO DO

          // When it is loaded, play.
          wavesurfer[i].on('ready', function() {
            wavesurfer[i].play();
          });

        } // End if url not undefined
      } // End if Loop is on
    }); // End of wavesurfer.on('finish')

  } // End if playlist
}

// Convert seconds into MS
function secondsTimeSpanToMS(s) {
  var m = Math.floor(s / 60); //Get remaining minutes
  s -= m * 60;
  s = Math.floor(s);
  return (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
} // End secondsTimeSpanToMS

// Pause the other players if Play is pressed on a player
function PauseOtherPlayers(wavesurfer, i) {
  $j.each(wavesurfer, function(j) {
    if (wavesurfer[j].isPlaying() && j != i) {
      wavesurfer[j].playPause();
    }
  });

  // Loop in each wavesurfer block
  $j('.wavesurfer-block button.wavesurfer-play').each(function(i) {
    // IF IS NOT PLAYING
    if ($j(this).hasClass('wavesurfer-active-button')) {
      SetPauseButton(this);
    }
  });
}

// Set Button to Pause
function SetPauseButton(object) {
  $j(object).removeClass('wavesurfer-active-button');

  $j(object).addClass('wavesurfer-paused-button');

  $j(object).children('span').text(wavesurfer_localize.resume);

  $j(object).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
  $j(object).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
}

$j('.wavesurfer-marker').click(function(event) {
  //event.preventDefault(); // Useful if links. Links can help TAB naivgation.
  var time_start = $j(this).data('start');
  var time_stop = $j(this).data('stop');
  if (time_stop !== undefined) {
    var time_end = $j(this).data('end');
  } else {
    var time_end = 0;
  }
  var id = $j(this).data('id');
  if (id >= 1) {
    id = id - 1;
  } else {
    id = 0;
  }
  time_start = TimeCodeToSeconds(time_start);
  time_end = TimeCodeToSeconds(time_end);
  console.log(time_start);
  var autoplay = $j(this).data('autoplay');
  if (autoplay === false) {
    wavesurfer[id].seekTo(time_start / wavesurfer[id].getDuration());
  } else {
    PauseOtherPlayers(wavesurfer, id);
    wavesurfer[id].play(time_start, time_end);
  }
});

function MarkerInit() {
  $j('.wavesurfer-marker').each(function(i) {
    var time_start = $j(this).data('start');
    var time_end = $j(this).data('end');
    var id = $j(this).data('id');
    if (id >= 1) {
      id = id - 1;
    } else {
      id = 0;
    }
    marker = {};
    marker.time_start = time_start;
    marker.time_end = time_end;
    marker.dom = this;
    if (typeof(markers[id]) === 'undefined') {
      markers[id] = [];
    }
    markers[id].push(marker);
  });
  console.log(markers);
}

function TimeCodeToSeconds( value ) {
  if ( typeof value === 'number' ) return value;
  var time_array = value.split(':');
  time_array = time_array.reverse();
  time_array[0] = time_array[0].replace(',', '.');

  var multiply = [1, 60, 3600, 86400];
  var seconds = 0;
  for( i=0; i < time_array.length;  i++) {
    seconds = time_array[i] * multiply[i] + seconds;
  }

  return seconds;
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions