Play and Learn Flute
Learn to Play Flute
Happy Birthday
A A B A D C
A A B A E D
A A G D C B A
G G F D E C
Row Row Row your Boat
C C C D E
E D E F G
G G G F F F D D D C C C
G F E D C
*Featured Code Created by Bobbie
Source Code
HTML with CSS and JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Learn to Play Flute</title>
<style>
.box { position: relative; width : 350px; height: 600px; border: 0px solid #CCC;border-radius:0px; background: url("https://cosmomusic.ca/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/B/S/BSFLARM303BOS_1_7.jpg ");background-size: cover ; }
button {
width:65px;
height:70px;
border-width:4px;
border-style: solid;
border-color:black;
background-color:#ff00ff;
border-radius:100% 50%;
text-align:center;
font-size:20px;
padding: 1px 1px;}
</style></head>
<body>
<div class="box"> <h1 style="text-align: center">Learn to Play Flute</h1>
<br>
<audio id="play1" src="http://88.198.78.90/ct/files/mp3/flute/478.mp3
"></audio> <button onclick="playSound1()">A</button>
<audio id="play2" src="http://88.198.78.90/ct/files/mp3/flute/486.mp3
"></audio> <button onclick="playSound2()">B</button>
<audio id="play3" src="http://88.198.78.90/ct/files/mp3/flute/490.mp3
"></audio> <button onclick="playSound3()">C</button>
<audio id="play4" src="http://88.198.78.90/ct/files/mp3/flute/498.mp3
"></audio> <button onclick="playSound4()">D</button>
<audio id="play5" src="http://88.198.78.90/ct/files/mp3/flute/3.mp3
"></audio> <button onclick="playSound5()">E</button>
<audio id="play6" src="http://88.198.78.90/ct/files/mp3/flute/510.mp3
"></audio> <button onclick="playSound6()">F</button>
<audio id="play7" src="http://88.198.78.90/ct/files/mp3/flute/518.mp3
"></audio> <button onclick="playSound7()">G</button><br><br>
Happy Birthday<br>A A B A D C<br>A A B A E D<br>A A G D C B A <br>G G F D E C<br><br>Row Row Row your Boat<br>C C C D E<br>E D E F G<br>G G G F F F D D D C C C <br>G F E D C
<br><br></div>
</body>
<script>
function playSound1 () { document.getElementById('play1').play(); }
function playSound2 () { document.getElementById('play2').play(); }
function playSound3 () { document.getElementById('play3').play(); }
function playSound4 () { document.getElementById('play4').play(); }
function playSound5 () { document.getElementById('play5').play(); }
function playSound6 () { document.getElementById('play6').play(); }
function playSound7 () { document.getElementById('play7').play(); }
</script>
</html>
I hope you enjoyed this content please consider supporting the development of Free Code Examples
Comments
Post a Comment