This repository has been archived by the owner on Feb 22, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 82
/
Copy pathindex.html
87 lines (77 loc) · 25.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Audio Read-Along Demo</title>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML5 Audio Read-Along Demo</h1>
<!-- @todo The link could pull in README.md via Ajax and render it inline -->
<p><em>Read the <a href="https://github.com/westonruter/html5-audio-read-along#readme">background and instructions</a> for this demo.</em></p>
<article>
<h2>
<a href="http://www.esvbible.org/Luke+2.1-20/" title="View Luke 2:1–20 on the ESV Bible website" target="_blank">Luke 2:1–20</a>
(<a href="http://www.esv.org/"><abbr title="English Standard Version">ESV</abbr></a>)
</h2>
<p class="loading">
<em><img src="loader.gif" alt="Initializing audio"> Loading audio…</em>
</p>
<p class="passage-audio" hidden>
<audio id="passage-audio" class="passage" controls>
<!-- @todo WebM? -->
<source src="audio/Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
<source src="audio/Luke.2.1-Luke.2.20.ogg" type="audio/ogg">
<source src="audio/Luke.2.1-Luke.2.20.wav" type="audio/wav">
<em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>
</p>
<p class="passage-audio-unavailable" hidden>
<em class="error"><strong>Error:</strong> You will not be able to do the read-along audio because your browser is not able to play MP3, Ogg, or WAV audio formats.</em>
</p>
<p class="playback-rate" hidden title="Note that increaseing the reading rate will decrease accuracy of word highlights">
<label for="playback-rate">Reading rate:</label>
<input id="playback-rate" type="range" min="0.5" max="2.0" value="1.0" step="0.1" disabled onchange='this.nextElementSibling.textContent = String(Math.round(this.valueAsNumber * 10) / 10) + "\u00D7";'>
<output>1×</output>
</p>
<p class="playback-rate-unavailable" hidden>
<em>(It seems your browser does not support <code>HTMLMediaElement.playbackRate</code>, so you will not be able to change the speech rate.)</em>
</p>
<p class="autofocus-current-word" hidden>
<input type="checkbox" id="autofocus-current-word" checked>
<label for="autofocus-current-word">Auto-focus/auto-scroll</label>
</p>
<noscript>
<p class="error"><em><strong>Notice:</strong> You must have JavaScript enabled/available to try this HTML5 Audio read along.</em></p>
</noscript>
<div id="passage-text" class="passage">
<h3 class="section-heading">The Birth of Jesus Christ</h3>
<p><sup class="verse-start">1</sup><span data-dur="0.154" data-begin="0.775">In</span> <span data-dur="0.28" data-begin="0.929">those</span> <span data-dur="0.29" data-begin="1.218">days</span> <span data-dur="0.131" data-begin="1.508">a</span> <span data-dur="0.525" data-begin="1.639">decree</span> <span data-dur="0.191" data-begin="2.165">went</span> <span data-dur="0.225" data-begin="2.355">out</span> <span data-dur="0.245" data-begin="2.583">from</span> <span data-dur="0.438" data-begin="2.828">Caesar</span> <span data-dur="0.637" data-begin="3.267">Augustus</span> <span data-dur="0.166" data-begin="4.03">that</span> <span data-dur="0.268" data-begin="4.216">all</span> <span data-dur="0.111" data-begin="4.486">the</span> <span data-dur="0.411" data-begin="4.594">world</span> <span data-dur="0.205" data-begin="5.006">should</span> <span data-dur="0.134" data-begin="5.211">be</span> <span data-dur="0.529" data-begin="5.344">registered</span>. <sup class="verse-start">2</sup><span data-dur="0.201" data-begin="6.675">This</span> <span data-dur="0.124" data-begin="6.876">was</span> <span data-dur="0.11" data-begin="7">the</span> <span data-dur="0.321" data-begin="7.11">first</span> <span data-dur="0.762" data-begin="7.431">registration</span> <span data-dur="0.164" data-begin="8.193">when</span> <span data-dur="0.474" data-begin="8.357">Quirinius</span> <span data-dur="0.206" data-begin="8.834">was</span> <span data-dur="0.338" data-begin="9.041">governor</span> <span data-dur="0.082" data-begin="9.379">of</span> <span data-dur="0.477" data-begin="9.46">Syria</span>. <sup class="verse-start">3</sup><span data-dur="0.119" data-begin="10.676">And</span> <span data-dur="0.24" data-begin="10.794">all</span> <span data-dur="0.186" data-begin="11.034">went</span> <span data-dur="0.087" data-begin="11.22">to</span> <span data-dur="0.139" data-begin="11.307">be</span> <span data-dur="0.592" data-begin="11.446">registered</span>, <span data-dur="0.251" data-begin="12.284">each</span> <span data-dur="0.093" data-begin="12.572">to</span> <span data-dur="0.134" data-begin="12.665">his</span> <span data-dur="0.275" data-begin="12.799">own</span> <span data-dur="0.467" data-begin="13.074">town</span>. <sup class="verse-start">4</sup><span data-dur="0.184" data-begin="14.369">And</span> <span data-dur="0.358" data-begin="14.553">Joseph</span> <span data-dur="0.351" data-begin="14.911">also</span> <span data-dur="0.128" data-begin="15.262">went</span> <span data-dur="0.152" data-begin="15.39">up</span> <span data-dur="0.215" data-begin="15.595">from</span> <span data-dur="0.541" data-begin="15.811">Galilee</span>, <span data-dur="0.074" data-begin="16.557">from</span> <span data-dur="0.121" data-begin="16.632">the</span> <span data-dur="0.236" data-begin="16.752">town</span> <span data-dur="0.097" data-begin="16.988">of</span> <span data-dur="0.559" data-begin="17.085">Nazareth</span>, <span data-dur="0.154" data-begin="17.966">to</span> <span data-dur="0.575" data-begin="18.12">Judea</span>, <span data-dur="0.129" data-begin="18.823">to</span> <span data-dur="0.059" data-begin="18.952">the</span> <span data-dur="0.31" data-begin="19.011">city</span> <span data-dur="0.166" data-begin="19.321">of</span> <span data-dur="0.393" data-begin="19.487">David</span>, <span data-dur="0.161" data-begin="20.029">which</span> <span data-dur="0.109" data-begin="20.19">is</span> <span data-dur="0.307" data-begin="20.321">called</span> <span data-dur="0.642" data-begin="20.628">Bethlehem</span>, <span data-dur="0.317" data-begin="21.76">because</span> <span data-dur="0.116" data-begin="22.077">he</span> <span data-dur="0.104" data-begin="22.193">was</span> <span data-dur="0.166" data-begin="22.297">of</span> <span data-dur="0.059" data-begin="22.463">the</span> <span data-dur="0.412" data-begin="22.522">house</span> <span data-dur="0.155" data-begin="22.935">and</span> <span data-dur="0.384" data-begin="23.09">lineage</span> <span data-dur="0.175" data-begin="23.474">of</span> <span data-dur="0.421" data-begin="23.648">David</span>, <sup class="verse-start">5</sup><span data-dur="0.127" data-begin="24.714">to</span> <span data-dur="0.172" data-begin="24.84">be</span> <span data-dur="0.53" data-begin="25.013">registered</span> <span data-dur="0.125" data-begin="25.543">with</span> <span data-dur="0.515" data-begin="25.668">Mary</span>, <span data-dur="0.172" data-begin="26.183">his</span> <span data-dur="0.607" data-begin="26.355">betrothed</span>, <span data-dur="0.123" data-begin="27.134">who</span> <span data-dur="0.166" data-begin="27.257">was</span> <span data-dur="0.167" data-begin="27.423">with</span> <span data-dur="0.513" data-begin="27.59">child</span>. <sup class="verse-start">6</sup><span data-dur="0.161" data-begin="29.448">And</span> <span data-dur="0.362" data-begin="29.609">while</span> <span data-dur="0.159" data-begin="29.97">they</span> <span data-dur="0.166" data-begin="30.129">were</span> <span data-dur="0.436" data-begin="30.295">there</span>, <span data-dur="0.159" data-begin="31.072">the</span> <span data-dur="0.431" data-begin="31.231">time</span> <span data-dur="0.277" data-begin="31.662">came</span> <span data-dur="0.161" data-begin="31.939">for</span> <span data-dur="0.093" data-begin="32.1">her</span> <span data-dur="0.107" data-begin="32.193">to</span> <span data-dur="0.233" data-begin="32.299">give</span> <span data-dur="0.352" data-begin="32.522">birth</span>. <sup class="verse-start">7</sup><span data-dur="0.133" data-begin="33.972">And</span> <span data-dur="0.213" data-begin="34.105">she</span> <span data-dur="0.277" data-begin="34.318">gave</span> <span data-dur="0.253" data-begin="34.596">birth</span> <span data-dur="0.069" data-begin="34.888">to</span> <span data-dur="0.171" data-begin="34.957">her</span> <span data-dur="0.602" data-begin="35.128">firstborn</span> <span data-dur="0.56" data-begin="35.73">son</span> <span data-dur="0.166" data-begin="36.491">and</span> <span data-dur="0.342" data-begin="36.657">wrapped</span> <span data-dur="0.153" data-begin="36.998">him</span> <span data-dur="0.119" data-begin="37.152">in</span> <span data-dur="0.55" data-begin="37.271">swaddling</span> <span data-dur="0.542" data-begin="37.82">cloths</span> <span data-dur="0.154" data-begin="38.644">and</span> <span data-dur="0.287" data-begin="38.798">laid</span> <span data-dur="0.176" data-begin="39.085">him</span> <span data-dur="0.087" data-begin="39.261">in</span> <span data-dur="0.092" data-begin="39.348">a</span> <span data-dur="0.604" data-begin="39.44">manger</span>, <span data-dur="0.277" data-begin="40.182">because</span> <span data-dur="0.131" data-begin="40.46">there</span> <span data-dur="0.151" data-begin="40.591">was</span> <span data-dur="0.213" data-begin="40.742">no</span> <span data-dur="0.312" data-begin="40.975">place</span> <span data-dur="0.121" data-begin="41.287">for</span> <span data-dur="0.158" data-begin="41.408">them</span> <span data-dur="0.116" data-begin="41.566">in</span> <span data-dur="0.111" data-begin="41.683">the</span> <span data-dur="0.406" data-begin="41.794">inn</span>.</p>
<h3 class="section-heading">The Shepherds and the Angels</h3>
<p><sup class="verse-start">8</sup><span data-dur="0.144" data-begin="43.166">And</span> <span data-dur="0.089" data-begin="43.309">in</span> <span data-dur="0.102" data-begin="43.398">the</span> <span data-dur="0.329" data-begin="43.5">same</span> <span data-dur="0.406" data-begin="43.829">region</span> <span data-dur="0.146" data-begin="44.236">there</span> <span data-dur="0.082" data-begin="44.382">were</span> <span data-dur="0.495" data-begin="44.463">shepherds</span> <span data-dur="0.154" data-begin="44.959">out</span> <span data-dur="0.104" data-begin="45.112">in</span> <span data-dur="0.094" data-begin="45.216">the</span> <span data-dur="0.561" data-begin="45.311">field</span>, <span data-dur="0.295" data-begin="45.954">keeping</span> <span data-dur="0.334" data-begin="46.249">watch</span> <span data-dur="0.173" data-begin="46.583">over</span> <span data-dur="0.107" data-begin="46.756">their</span> <span data-dur="0.401" data-begin="46.863">flock</span> <span data-dur="0.124" data-begin="47.264">by</span> <span data-dur="0.374" data-begin="47.388">night</span>. <sup class="verse-start">9</sup><span data-dur="0.144" data-begin="48.751">And</span> <span data-dur="0.176" data-begin="48.895">an</span> <span data-dur="0.409" data-begin="49.071">angel</span> <span data-dur="0.109" data-begin="49.479">of</span> <span data-dur="0.134" data-begin="49.588">the</span> <span data-dur="0.233" data-begin="49.722">Lord</span> <span data-dur="0.491" data-begin="49.955">appeared</span> <span data-dur="0.107" data-begin="50.446">to</span> <span data-dur="0.31" data-begin="50.553">them</span>, <span data-dur="0.126" data-begin="51.164">and</span> <span data-dur="0.186" data-begin="51.29">the</span> <span data-dur="0.49" data-begin="51.476">glory</span> <span data-dur="0.129" data-begin="51.967">of</span> <span data-dur="0.092" data-begin="52.095">the</span> <span data-dur="0.361" data-begin="52.187">Lord</span> <span data-dur="0.409" data-begin="52.548">shone</span> <span data-dur="0.436" data-begin="52.957">around</span> <span data-dur="0.23" data-begin="53.393">them</span>, <span data-dur="0.102" data-begin="53.899">and</span> <span data-dur="0.084" data-begin="54.001">they</span> <span data-dur="0.092" data-begin="54.085">were</span> <span data-dur="0.401" data-begin="54.177">filled</span> <span data-dur="0.3" data-begin="54.578">with</span> <span data-dur="0.481" data-begin="54.878">fear</span>. <sup class="verse-start">10</sup><span data-dur="0.107" data-begin="55.998">And</span> <span data-dur="0.109" data-begin="56.104">the</span> <span data-dur="0.352" data-begin="56.213">angel</span> <span data-dur="0.23" data-begin="56.565">said</span> <span data-dur="0.102" data-begin="56.795">to</span> <span data-dur="0.248" data-begin="56.897">them</span>, <q><span data-dur="0.327" data-begin="57.858">Fear</span> <span data-dur="0.381" data-begin="58.185">not</span>, <span data-dur="0.116" data-begin="58.767">for</span> <span data-dur="0.703" data-begin="58.883">behold</span>, <span data-dur="0.272" data-begin="60.051">I</span> <span data-dur="0.188" data-begin="60.323">bring</span> <span data-dur="0.238" data-begin="60.512">you</span> <span data-dur="0.248" data-begin="60.75">good</span> <span data-dur="0.593" data-begin="60.998">news</span> <span data-dur="0.178" data-begin="61.749">of</span> <span data-dur="0.372" data-begin="61.927">great</span> <span data-dur="0.622" data-begin="62.299">joy</span> <span data-dur="0.114" data-begin="63.247">that</span> <span data-dur="0.171" data-begin="63.361">will</span> <span data-dur="0.169" data-begin="63.532">be</span> <span data-dur="0.151" data-begin="63.701">for</span> <span data-dur="0.315" data-begin="63.852">all</span> <span data-dur="0.149" data-begin="64.167">the</span> <span data-dur="0.481" data-begin="64.316">people</span>. <sup class="verse-start">11</sup><span data-dur="0.166" data-begin="65.384">For</span> <span data-dur="0.317" data-begin="65.55">unto</span> <span data-dur="0.121" data-begin="65.867">you</span> <span data-dur="0.173" data-begin="65.988">is</span> <span data-dur="0.287" data-begin="66.162">born</span> <span data-dur="0.302" data-begin="66.449">this</span> <span data-dur="0.316" data-begin="66.751">day</span> <span data-dur="0.074" data-begin="67.067">in</span> <span data-dur="0.069" data-begin="67.142">the</span> <span data-dur="0.28" data-begin="67.211">city</span> <span data-dur="0.173" data-begin="67.491">of</span> <span data-dur="0.461" data-begin="67.664">David</span> <span data-dur="0.087" data-begin="68.34">a</span> <span data-dur="0.689" data-begin="68.426">Savior</span>, <span data-dur="0.126" data-begin="69.353">who</span> <span data-dur="0.184" data-begin="69.479">is</span> <span data-dur="0.411" data-begin="69.663">Christ</span> <span data-dur="0.146" data-begin="70.075">the</span> <span data-dur="0.528" data-begin="70.22">Lord</span>. <sup class="verse-start">12</sup><span data-dur="0.173" data-begin="71.32">And</span> <span data-dur="0.191" data-begin="71.493">this</span> <span data-dur="0.131" data-begin="71.684">will</span> <span data-dur="0.104" data-begin="71.815">be</span> <span data-dur="0.035" data-begin="71.919">a</span> <span data-dur="0.461" data-begin="71.954">sign</span> <span data-dur="0.162" data-begin="72.415">for</span> <span data-dur="0.436" data-begin="72.577">you</span>: <span data-dur="0.119" data-begin="73.352">you</span> <span data-dur="0.094" data-begin="73.471">will</span> <span data-dur="0.399" data-begin="73.565">find</span> <span data-dur="0.141" data-begin="73.963">a</span> <span data-dur="0.463" data-begin="74.105">baby</span> <span data-dur="0.416" data-begin="74.818">wrapped</span> <span data-dur="0.146" data-begin="75.234">in</span> <span data-dur="0.602" data-begin="75.381">swaddling</span> <span data-dur="0.498" data-begin="75.982">cloths</span> <span data-dur="0.185" data-begin="76.48">and</span> <span data-dur="0.359" data-begin="76.665">lying</span> <span data-dur="0.092" data-begin="77.024">in</span> <span data-dur="0.074" data-begin="77.116">a</span> <span data-dur="0.617" data-begin="77.19">manger</span>.</q> <sup class="verse-start">13</sup><span data-dur="0.161" data-begin="78.542">And</span> <span data-dur="0.624" data-begin="78.703">suddenly</span> <span data-dur="0.173" data-begin="79.327">there</span> <span data-dur="0.206" data-begin="79.501">was</span> <span data-dur="0.196" data-begin="79.706">with</span> <span data-dur="0.136" data-begin="79.902">the</span> <span data-dur="0.478" data-begin="80.038">angel</span> <span data-dur="0.159" data-begin="80.516">a</span> <span data-dur="0.632" data-begin="80.675">multitude</span> <span data-dur="0.102" data-begin="81.307">of</span> <span data-dur="0.072" data-begin="81.408">the</span> <span data-dur="0.387" data-begin="81.48">heavenly</span> <span data-dur="0.389" data-begin="81.867">host</span> <span data-dur="0.47" data-begin="82.657">praising</span> <span data-dur="0.349" data-begin="83.126">God</span> <span data-dur="0.091" data-begin="83.475">and</span> <span data-dur="0.508" data-begin="83.566">saying</span>,</p>
<blockquote>
<p><sup class="verse-start">14</sup><span data-dur="0.508" data-begin="84.905">Glory</span> <span data-dur="0.178" data-begin="85.413">to</span> <span data-dur="0.352" data-begin="85.591">God</span> <span data-dur="0.079" data-begin="85.943">in</span> <span data-dur="0.057" data-begin="86.022">the</span> <span data-dur="0.58" data-begin="86.079">highest</span>,<br />
<span data-dur="0.166" data-begin="87.058">and</span> <span data-dur="0.18" data-begin="87.224">on</span> <span data-dur="0.385" data-begin="87.404">earth</span> <span data-dur="0.338" data-begin="88.025">peace</span> <span data-dur="0.271" data-begin="88.363">among</span> <span data-dur="0.314" data-begin="88.634">those</span> <span data-dur="0.165" data-begin="88.948">with</span> <span data-dur="0.197" data-begin="89.113">whom</span> <span data-dur="0.156" data-begin="89.31">he</span> <span data-dur="0.16" data-begin="89.466">is</span> <span data-dur="0.715" data-begin="89.626">pleased</span>!</p>
</blockquote>
<p><sup class="verse-start">15</sup><span data-dur="0.145" data-begin="91.824">When</span> <span data-dur="0.117" data-begin="91.969">the</span> <span data-dur="0.396" data-begin="92.086">angels</span> <span data-dur="0.158" data-begin="92.482">went</span> <span data-dur="0.256" data-begin="92.64">away</span> <span data-dur="0.215" data-begin="92.896">from</span> <span data-dur="0.188" data-begin="93.112">them</span> <span data-dur="0.269" data-begin="93.3">into</span> <span data-dur="0.459" data-begin="93.569">heaven</span>, <span data-dur="0.065" data-begin="94.204">the</span> <span data-dur="0.489" data-begin="94.269">shepherds</span> <span data-dur="0.236" data-begin="94.758">said</span> <span data-dur="0.104" data-begin="94.994">to</span> <span data-dur="0.128" data-begin="95.098">one</span> <span data-dur="0.483" data-begin="95.226">another</span>, <q><span data-dur="0.136" data-begin="96.508">Let</span> <span data-dur="0.176" data-begin="96.644">us</span> <span data-dur="0.139" data-begin="96.82">go</span> <span data-dur="0.165" data-begin="96.959">over</span> <span data-dur="0.156" data-begin="97.124">to</span> <span data-dur="0.479" data-begin="97.281">Bethlehem</span> <span data-dur="0.08" data-begin="97.76">and</span> <span data-dur="0.312" data-begin="97.84">see</span> <span data-dur="0.31" data-begin="98.152">this</span> <span data-dur="0.253" data-begin="98.462">thing</span> <span data-dur="0.093" data-begin="98.715">that</span> <span data-dur="0.134" data-begin="98.808">has</span> <span data-dur="0.516" data-begin="98.942">happened</span>, <span data-dur="0.208" data-begin="99.642">which</span> <span data-dur="0.113" data-begin="99.85">the</span> <span data-dur="0.24" data-begin="99.964">Lord</span> <span data-dur="0.13" data-begin="100.203">has</span> <span data-dur="0.225" data-begin="100.333">made</span> <span data-dur="0.281" data-begin="100.558">known</span> <span data-dur="0.085" data-begin="100.839">to</span> <span data-dur="0.353" data-begin="100.924">us</span>.</q> <sup class="verse-start">16</sup><span data-dur="0.128" data-begin="101.996">And</span> <span data-dur="0.169" data-begin="102.124">they</span> <span data-dur="0.279" data-begin="102.293">went</span> <span data-dur="0.13" data-begin="102.572">with</span> <span data-dur="0.466" data-begin="102.702">haste</span> <span data-dur="0.117" data-begin="103.168">and</span> <span data-dur="0.359" data-begin="103.285">found</span> <span data-dur="0.355" data-begin="103.644">Mary</span> <span data-dur="0.169" data-begin="103.999">and</span> <span data-dur="0.416" data-begin="104.168">Joseph</span>, <span data-dur="0.132" data-begin="104.584">and</span> <span data-dur="0.139" data-begin="104.716">the</span> <span data-dur="0.338" data-begin="104.855">baby</span> <span data-dur="0.357" data-begin="105.193">lying</span> <span data-dur="0.056" data-begin="105.55">in</span> <span data-dur="0.058" data-begin="105.606">a</span> <span data-dur="0.567" data-begin="105.664">manger</span>. <sup class="verse-start">17</sup><span data-dur="0.173" data-begin="107.011">And</span> <span data-dur="0.199" data-begin="107.184">when</span> <span data-dur="0.121" data-begin="107.382">they</span> <span data-dur="0.346" data-begin="107.503">saw</span> <span data-dur="0.236" data-begin="107.849">it</span>, <span data-dur="0.152" data-begin="108.382">they</span> <span data-dur="0.21" data-begin="108.534">made</span> <span data-dur="0.373" data-begin="108.744">known</span> <span data-dur="0.071" data-begin="109.117">the</span> <span data-dur="0.424" data-begin="109.188">saying</span> <span data-dur="0.102" data-begin="109.611">that</span> <span data-dur="0.134" data-begin="109.714">had</span> <span data-dur="0.189" data-begin="109.848">been</span> <span data-dur="0.373" data-begin="110.037">told</span> <span data-dur="0.18" data-begin="110.411">them</span> <span data-dur="0.502" data-begin="110.591">concerning</span> <span data-dur="0.136" data-begin="111.092">this</span> <span data-dur="0.684" data-begin="111.228">child</span>. <sup class="verse-start">18</sup><span data-dur="0.152" data-begin="112.668">And</span> <span data-dur="0.336" data-begin="112.82">all</span> <span data-dur="0.137" data-begin="113.157">who</span> <span data-dur="0.271" data-begin="113.294">heard</span> <span data-dur="0.262" data-begin="113.565">it</span> <span data-dur="0.446" data-begin="113.827">wondered</span> <span data-dur="0.113" data-begin="114.273">at</span> <span data-dur="0.176" data-begin="114.387">what</span> <span data-dur="0.078" data-begin="114.563">the</span> <span data-dur="0.505" data-begin="114.641">shepherds</span> <span data-dur="0.345" data-begin="115.147">told</span> <span data-dur="0.318" data-begin="115.492">them</span>. <sup class="verse-start">19</sup><span data-dur="0.188" data-begin="116.538">But</span> <span data-dur="0.476" data-begin="116.726">Mary</span> <span data-dur="0.371" data-begin="117.201">treasured</span> <span data-dur="0.16" data-begin="117.572">up</span> <span data-dur="0.241" data-begin="117.731">all</span> <span data-dur="0.282" data-begin="117.973">these</span> <span data-dur="0.533" data-begin="118.254">things</span>, <span data-dur="0.537" data-begin="119.178">pondering</span> <span data-dur="0.139" data-begin="119.715">them</span> <span data-dur="0.098" data-begin="119.854">in</span> <span data-dur="0.18" data-begin="119.952">her</span> <span data-dur="0.528" data-begin="120.133">heart</span>. <sup class="verse-start">20</sup><span data-dur="0.085" data-begin="121.551">And</span> <span data-dur="0.071" data-begin="121.636">the</span> <span data-dur="0.429" data-begin="121.707">shepherds</span> <span data-dur="0.659" data-begin="122.136">returned</span>, <span data-dur="0.749" data-begin="123.144">glorifying</span> <span data-dur="0.258" data-begin="123.893">and</span> <span data-dur="0.563" data-begin="124.151">praising</span> <span data-dur="0.377" data-begin="124.715">God</span> <span data-dur="0.247" data-begin="125.092">for</span> <span data-dur="0.217" data-begin="125.339">all</span> <span data-dur="0.167" data-begin="125.556">they</span> <span data-dur="0.197" data-begin="125.723">had</span> <span data-dur="0.329" data-begin="125.92">heard</span> <span data-dur="0.119" data-begin="126.249">and</span> <span data-dur="0.591" data-begin="126.368">seen</span>, <span data-dur="0.154" data-begin="127.239">as</span> <span data-dur="0.073" data-begin="127.394">it</span> <span data-dur="0.173" data-begin="127.467">had</span> <span data-dur="0.174" data-begin="127.641">been</span> <span data-dur="0.31" data-begin="127.815">told</span> <span data-dur="0.249" data-begin="128.125">them</span>.</p>
</div>
<footer class="credits">
Scripture taken from The Holy Bible, English Standard Version.
Copyright ©2001 by <a href="http://www.crosswaybibles.org" target="_blank">Crossway Bibles</a>,
a publishing ministry of Good News Publishers. Used by permission. All rights reserved.
Data obtained from the <a href="http://www.gnpcb.org/esv/share/services/" target="_blank">ESV Bible Web Service</a>.
</footer>
</article>
<footer class="credits">
By
<a rel="author" href="http://westonruter.github.com/">Weston Ruter</a>
(<a href="https://twitter.com/westonruter">@westonruter</a>),
<a href="http://x-team.com/" title="My employer">X-Team</a>.
Code licensed <a href="http://www.opensource.org/licenses/MIT" rel="license">MIT</a>/<a href="http://www.gnu.org/licenses/gpl.html" rel="license">GPL</a>.
</footer>
<script src="read-along.js"></script>
<script src="main.js"></script>
</body>
</html>