JSFiddle

  • WEB TEMPLATE: HTML Audio Simple Template 001

    HTML Audio Template

    var ready = function () {
    
        var music = document.getElementById('music');
        var duration;
        var pButton = document.getElementById('pButton');
    
        var playhead = document.getElementById('playhead ...
  • WEB TEMPLATE: Alphabet Sound List

    Alphabet Sound List

    	<div id="alphabetSoundList">
    
    		<audio id="A" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/a/a__/a__gb/a__gb_3.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('A').play();">A</div>
    		<audio id="B" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/b/b__/b__gb/b__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('B').play();">B</div>
    		<audio id="C" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/c/c__/c__gb/c__gb_1.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('C').play();">C</div>
    		<audio id="D" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/d/d__/d__gb/d__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('D').play();">D</div>
    		<audio id="E" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/e/e__/e__gb/e__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('E').play();">E</div>
    		<audio id="F" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/f/f__/f__gb/f__gb_1.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('F').play();">F</div>
    		<audio id="G" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/g/g__/g__gb/g__gb_2.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('G').play();">G</div>
    		<audio id="H" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/h/h__/h__gb/h__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('H').play();">H</div>
    		<audio id="I" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/i/i__/i__gb/i__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('I').play();">I</div>
    		<audio id="J" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/j/j__/j__gb/j__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('J').play();">J</div>
    		<audio id="K" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/k/k__/k__gb/k__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('K').play();">K</div>
    		<audio id="L" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/l/l__/l__gb/l__gb_1.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('L').play();">L</div>
    		<audio id="M" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/m/m__/m__gb/m__gb_1.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('M').play();">M</div>
    		<audio id="N" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/n/n__/n__gb/n__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('N').play();">N</div>
    		<audio id="O" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/o/o__/o__gb/o__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('O').play();">O</div>
    		<audio id="P" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/p/p__/p__gb/p__gb_1.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('P').play();">P</div>
    		<audio id="Q" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/q/q__/q__gb/q__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('Q').play();">Q</div>
    		<audio id="R" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/r/r__/r__gb/r__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('R').play();">R</div>
    		<audio id="S" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/s/s__/s__gb/s__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('S').play();">S</div>
    		<audio id="T" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/t/t__/t__gb/t__gb_1_4.ogg"></audio>
    		<div class="alphabet" onclick="document.getElementById('T').play();">T ...</div></div>
  • TEXT EFFECTS: Inset Text

    Cool Text Effects Using CSS Text-Shadow

    <div id="inset">
      <h1>Inset</h1>
    </div>
    
  • WEB TEMPLATE: HTML Audio Simple Template

    HTML Audio Template

    var ready = function () {
    
        var music = document.getElementById('music');
        var duration;
        var pButton = document.getElementById('pButton');
    
        var playhead = document.getElementById('playhead ...