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

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

Behavior

Save Automatically?

Auto-Updating Preview

Editor Settings

Code Indentation

Indent width

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

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions