HTML 5 Source - Alphabet Sound List

Rãnh rỗi làm bảng HTML 5 Alphabet Sound List chơi, bài viết này cung cấp mã nguồn bảng chữ cái tiếng anh 26 ký tự, khi bạn click vao ký nào thì sẽ có âm thanh phát âm phát ra, nó sẽ giúp bạn luyện phát âm bảng chữ cái một cách dễ dàng và nhanh chóng.



HTML 5 Source - Alphabet Sound List

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Alphabet Sound List</title>


<style type="text/css">
   .alphabet {
    width: 100px;
    height: 100px;
    float: left;

    text-align: center;
    vertical-align: middle;
    line-height: 90px;       /* the same as your div height */
   
    border:1px solid #cccccc;
    font-size: 70px;
   
    margin: 5px;
   }
  
   .alphabet:hover {
    cursor: pointer;
    background: gainsboro;
   }
  </style>

</head>

<body>

    <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>
        <audio id="U" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/u/u__/u__gb/u__gb_2_4.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('U').play();">U</div>
        <audio id="V" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/v/v__/v__gb/v__gb_1.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('V').play();">V</div>
        <audio id="W" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/w/w__/w__gb/w__gb_1_4.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('W').play();">W</div>
        <audio id="X" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/x/x__/x__gb/x__gb_1.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('X').play();">X</div>
        <audio id="Y" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/y/y__/y__gb/y__gb_1.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('Y').play();">Y</div>
        <audio id="Z" preload="auto" src="http://www.oxforddictionaries.com/media/english/uk_pron_ogg/z/z__/z__gb/z__gb_1.ogg"></audio>
        <div class="alphabet" onclick="document.getElementById('Z').play();">Z</div>

    </div>

</body>

</html>


HTML 5 Demo - Alphabet Sound List

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z





Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)