1 | // Based on:
|
---|
2 | // http://www.theonlytutorials.com/jquery-drum-sets-html5-audio-tag-example/
|
---|
3 |
|
---|
4 | $(document).ready(function() {
|
---|
5 |
|
---|
6 | //create the audio tag using jquery
|
---|
7 | //include the drum kit mp3s
|
---|
8 |
|
---|
9 | var base_collection = gs.variables.httpCollection;
|
---|
10 | var base_audio = base_collection + "/audio";
|
---|
11 |
|
---|
12 | var drum1 = document.createElement('audio');
|
---|
13 | drum1.setAttribute('src', base_audio + '/drum1.mp3');
|
---|
14 | var drum2 = document.createElement('audio');
|
---|
15 | drum2.setAttribute('src', base_audio + '/drum2.mp3');
|
---|
16 | var drum3 = document.createElement('audio');
|
---|
17 | drum3.setAttribute('src', base_audio + '/drum3.mp3');
|
---|
18 | var drum4 = document.createElement('audio');
|
---|
19 | drum4.setAttribute('src', base_audio + '/drum4.mp3');
|
---|
20 | var drum5 = document.createElement('audio');
|
---|
21 | drum5.setAttribute('src', base_audio + '/drum5.mp3');
|
---|
22 | var drum6 = document.createElement('audio');
|
---|
23 | drum6.setAttribute('src', base_audio + '/drum6.mp3');
|
---|
24 |
|
---|
25 | var drum;
|
---|
26 |
|
---|
27 | $('.drum').click(function() {
|
---|
28 |
|
---|
29 | //find the drum it and play the respective audio
|
---|
30 | drum = $(this).attr('id');
|
---|
31 | drum = eval(drum);
|
---|
32 |
|
---|
33 | if (drum.ended) {
|
---|
34 | drum.play();
|
---|
35 | } else {
|
---|
36 | try {
|
---|
37 | drum.currentTime = 0;
|
---|
38 | } catch (e) {
|
---|
39 | console.log("Error thrown when playing drum sound: " + e);
|
---|
40 | }
|
---|
41 | drum.play();
|
---|
42 | }
|
---|
43 | });
|
---|
44 | });
|
---|