Hello, I’m trying to play multiple tracks of different instruments, and it works correctly with a “Play All” button. Is it possible to mute single tracks, so that the listener can choose, for example, to hear only some instruments and change between Mute / Play (not pause)?
I found some javascripts in the forum, but I don’t know how to use those scripts in my document.
Thank You for a suggestion! 
Hi Matt!
Here is a Hype Demo: Multitrack1_JHSv1.hype.zip (1.6 MB)
Online Demo here.
We can not use Hype’s built in features to do what You requested. We need to go a different route and use HTML “Audio” tags and some JavaScript.
The “Mute” buttons in my demo provide the triggering elements.
There is an audio tag in the “innerHTML” of each one. (To edit the “innerHTML” of a selected element choose “Edit Element’s innerHTML” from Hype’s “Edit” menu.)
Example audio tag of the top “Mute” button (for “Soprano” .mp3 sound):
<audio id="sound-1">
<source src="${resourcesFolderName}/1v.mp3" type="audio/mpeg">
</audio>
Each “Mute” button has an ID (located in Hype’s “Identity” Inspector) that helps identify the corresponding sound to mute, i.e. “mute-sound-1”.
Note that the last seven characters of this ID match the ID in the audio tag for this “Mute” button.
There are three JavaScripts that handle the “Mute”, “Play All” & “Stop All” functions:
1) “playAllSounds” - The IDs referenced are the IDs of the audio tags in the innerHTML of each “Mute” button.
mySound1 = document.getElementById("sound-1");
mySound2 = document.getElementById("sound-2");
mySound3 = document.getElementById("sound-3");
mySound1.play();
mySound2.play();
mySound3.play();
**2) "stopAllSounds"** - Note that were are actually stopping the sounds (not pausing them) by reloading them.
mySound1.load();
mySound2.load();
mySound3.load();
**3) "muteSoundToggle"** - As with the functions above we are referencing the IDs of the _audio tags_ in the innerHTML of each "Mute" button. When a "Mute" button is clicked on Hype can ID the element. Here we take the last seven characters of the ID name (using the "slice" method) which by no small coincidence matches the ID of the corresponding "audio" tag. Then we check to see if the sound is muted or not and toggle the current state.
whatSnd = element.id.slice(-7);
muteSnd = document.getElementById(whatSnd);
muteSnd.muted ? muteSnd.muted = false : muteSnd.muted = true;
1 Like
Thank You JimScott! It works very good! 
Your clear explanations are very useful to figure out how to proceed.
I will complete my tutorial on orchestral writing for my students.
Yours sincerely
Matt
1 Like
I tried to add more instruments, but perhaps it requires too much resources. On my iMac it works fine, but others say that the tracks don’t play in sync, and I can hear the problem on my iPad.
same as here¿
1 Like
Hi Matt!
Definitely check out Hans’ link. Mobile devices - amazing as they are do hit limitations. Raleigh (the linked to poster) seems to have found a satisfactory solution in this regard.
But I also wanted to point out that it might be useful to indicate which instruments are being muted - such as by modifying the look of the button (a change of color, opacity, border thickness), a marker along side the active mute button, etc.
1 Like
Good point, JimScott! I will figure out how to proceed to show the selected instruments. I tried to compress the mp3 audio, but without performance improvements. I will try Raleigh’s solution. Thanks a lot!
Hi JimScott, I see I need to study how javascript works ;). I read an interesting book (A Book About Hype by M. Garofalo), but now I understand that for advanced tasks I need more. Could you suggest a link or a book about Javascript?
I found the book "JavaScript & jQuery - The Missing Manual" to be a concise, well-written intro to JavaScript (link below gives a bit more insight). It also covers jQuery, an excellent JavaScript library. Even if You are not interested in jQuery, just the JavaScript (only) parts and chapters discussing JavaScript strategies are worth the book price.
Basic question - tying things together - #5 by JimScott
One idea for indicating a muted button - using a thicker border for the button that is muted:
The script for the function "muteSoundToggle" from my previous example with indicated code changes:
whatEl = element.id; // new code
whatEl = hypeDocument.getElementById(whatEl); // new code
whatSnd = element.id.slice(-7);
muteSnd = document.getElementById(whatSnd);
//muteSnd.muted ? muteSnd.muted = false : muteSnd.muted = true;
// previous code, no longer used to be replaced by segment below
if(muteSnd.muted == false) {
muteSnd.muted = true;
whatEl.style.borderWidth = "3px";
} else if(muteSnd.muted == true) {
muteSnd.muted = false;
whatEl.style.borderWidth = "1px";
}
1 Like
I updated the function “muteSoundToggle”, but now the mute button doesn’t work anymore
. Should I update something else in the document?
Multitrack1_JHSv3.hype.zip (2,2 MB)
Now I see that the tracks are not in sync even on my iMac (the same old document that yesterday was ok). I can’t understand why.
Wunderbar! Fantastic! It works perfectly on my old iPad, too!
I noticed that the music didn’t start on iPad, but if i tap on the screen then
it starts correctly.
I will study your code to understand how it works.
Thanks a lot Hans-Gerd!
yeah most mobiles will need a trigger by the user … so just consider in your logic setup and you’re done …
I added some instrument images next to the buttons but those disappear at the beginning. Are those hidden by the animation?
Beautiful Hans!
1 Like
hi everyone this is Simone.
first of all let me thank you for being so helpfull with your public demos, you really make me approch a solution to my problem. I'm using the file on this post but I need all soud to start "mute" and then activate the singol instrument by clicking each one of it forming the ful sound. I know is a simple adding on the java funcion but it's really complicate to understand for me. if someone can help...
thank you