1 | // Based on:
|
---|
2 | // http://www.theonlytutorials.com/jquery-drum-sets-html5-audio-tag-example/
|
---|
3 |
|
---|
4 |
|
---|
5 | var hitDrumStartCurrentTime = null;
|
---|
6 | var hitDrumEndCurrentTime;
|
---|
7 | var hitDrumMidiPitch;
|
---|
8 | var hitDrumMidiPitchReadable;
|
---|
9 |
|
---|
10 | function calcDrumMidiNoteInfo() {
|
---|
11 | if (hitDrumStartCurrentTime != null) {
|
---|
12 |
|
---|
13 | var hitDrumDuration = hitDrumEndCurrentTime - hitDrumStartCurrentTime;
|
---|
14 |
|
---|
15 | // console.log("**** " + playedNotePitch + " (midi pitch = " + playedMidiPitch+ ") startTime = ", relativePlayStartTime + ", duration = " + playedDuration);
|
---|
16 |
|
---|
17 | if (mediaPlayedNotes[String(mediaStartPlayTime)]) {
|
---|
18 |
|
---|
19 | mediaPlayedNotes[String(mediaStartPlayTime)].push(
|
---|
20 | { 'type' : "drum",
|
---|
21 | 'midiPitch' : hitDrumMidiPitch,
|
---|
22 | //'midiNoteOn' : relativePlayedNoteStartTime,
|
---|
23 | //'midiNoteOff' : relativePlayedNoteEndTime,
|
---|
24 | 'startCurrentTime' : hitDrumStartCurrentTime,
|
---|
25 | 'duration' : hitDrumDuration,
|
---|
26 | 'startPercTime': hitDrumStartCurrentTime/mediaPlayer.duration,
|
---|
27 | 'humanReadble' : hitDrumMidiPitchReadable }
|
---|
28 | );
|
---|
29 | }
|
---|
30 |
|
---|
31 | }
|
---|
32 | }
|
---|
33 |
|
---|
34 | $(document).ready(function() {
|
---|
35 |
|
---|
36 | //create the audio tag using jquery
|
---|
37 | //include the drum kit mp3s
|
---|
38 |
|
---|
39 | var base_collection = gs.variables.httpCollection;
|
---|
40 | var base_audio = base_collection + "/audio";
|
---|
41 |
|
---|
42 | var drum1 = document.createElement('audio');
|
---|
43 | drum1.setAttribute('src', base_audio + '/drum1.mp3');
|
---|
44 | var drum2 = document.createElement('audio');
|
---|
45 | drum2.setAttribute('src', base_audio + '/drum2.mp3');
|
---|
46 | var drum3 = document.createElement('audio');
|
---|
47 | drum3.setAttribute('src', base_audio + '/drum3.mp3');
|
---|
48 | var drum4 = document.createElement('audio');
|
---|
49 | drum4.setAttribute('src', base_audio + '/drum4.mp3');
|
---|
50 | var drum5 = document.createElement('audio');
|
---|
51 | drum5.setAttribute('src', base_audio + '/drum5.mp3');
|
---|
52 | var drum6 = document.createElement('audio');
|
---|
53 | drum6.setAttribute('src', base_audio + '/drum6.mp3');
|
---|
54 |
|
---|
55 | var drum;
|
---|
56 |
|
---|
57 | $('.drum').mousedown(function() {
|
---|
58 |
|
---|
59 | hitDrumStartCurrentTime = mediaPlayer.currentTime;
|
---|
60 | hitDrumMidiPitchReadable = $(this).attr('id');
|
---|
61 | hitDrumMidiPitch = hitDrumMidiPitchReadable.replace(/^drum/,"");
|
---|
62 |
|
---|
63 | //find the drum hit and play the respective audio
|
---|
64 | drum = $(this).attr('id');
|
---|
65 | drum = eval(drum);
|
---|
66 |
|
---|
67 | if (drum.ended) {
|
---|
68 | $(this).addClass('hit');
|
---|
69 | drum.play();
|
---|
70 | } else {
|
---|
71 | try {
|
---|
72 | drum.currentTime = 0;
|
---|
73 | } catch (e) {
|
---|
74 | console.log("Error thrown when playing drum sound: " + e);
|
---|
75 | }
|
---|
76 |
|
---|
77 | // Force finish of previous drum hit
|
---|
78 | hitDrumEndCurrentTime = mediaPlayer.currentTime;
|
---|
79 | calcDrumMidiNoteInfo();
|
---|
80 | hitDrumStartCurrentTime = mediaPlayer.currentTime;
|
---|
81 | hitDrumEndCurrentTime = null;
|
---|
82 |
|
---|
83 | $(this).addClass('hit');
|
---|
84 | drum.play();
|
---|
85 | }
|
---|
86 | });
|
---|
87 |
|
---|
88 | $('.drum').mouseup(function() {
|
---|
89 | hitDrumEndCurrentTime = mediaPlayer.currentTime;
|
---|
90 | calcDrumMidiNoteInfo();
|
---|
91 | hitDrumStartCurrentTime = null;
|
---|
92 |
|
---|
93 | $(this).removeClass('hit');
|
---|
94 | });
|
---|
95 |
|
---|
96 | });
|
---|