-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathexample.html
33 lines (31 loc) · 947 Bytes
/
example.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
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="wcdg.js"></script>
<script>
$(document).ready(function() {
var player = new CDGPlayer(document.getElementById('karaoke-display'));
player.load('YOUR_CDG_FILE.cdg');
document.getElementById('song').addEventListener("playing", function() {
player.play();
});
$("#karaoke-display").on("click", function() { document.getElementById('song').play(); });
});
</script>
</head>
<body>
<div id="karaoke-player"></div>
<canvas id="karaoke-display" width="600" height="432" style="border: 1px solid black;">
</canvas>
<br/>
<audio id="song">
<source src="YOUR_MP3_FILE.mp3" type="audio/mpeg" />
<source src="YOUR_OGG_FILE.ogg" type="audio/ogg" />
</audio>
<br/>
You should see a karaoke player on this page when you click the canvas.<br/>
<div id="cdg-debug">
</div>
</body>
</html>