stop, pause button

Asynchronous MIDI library for Node.js and HTML
Post Reply
ioetbc
Posts: 1
Joined: Fri Apr 28, 2017 4:37 am

stop, pause button

Post by ioetbc » Sun Apr 30, 2017 3:48 am

Hi I have just started using jazz-soft to create a piano that plays individual songs, I am looking to add a stop function in, so a user can stop and play a song at their free will.
Currently, I am using the Autoplay function with a midi file below it. The user is able to start the song but I am looking for a solution to be able stop/pause the song at any point. If anyone has figured this one out, it would be a great help Currently my code is the following. Thanks to all.



Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>

<title>My first Piano Book</title>

<script type="text/javascript" src="jzz.js"></script>

<script type="text/javascript" src="JZZ.synth.OSC.js"></script>

<script type="text/javascript" src="JZZ.input.Kbd.js"></script>
</head>

<body>

<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
  <object id="Jazz2" type="audio/x-jazz" class="hidden">
<p style="visibility:visible;">&nbsp;</a></p>
  </object>
</object>

<h2>My first Piano Book</h2>

<div id="piano"></div>
	<div class="trackContainer">
		<button onclick='playJingleBells();'> Jingle Bells</button>
		<button onclick='stop();'>Stop</button> <!-- [b][color=#FF0000]I am calling the stop function here[/color] [/b]
	</div>
<style>
	
	#piano {
		text-align: center;
	}
	
	button {
		display: block;
		margin-top: 20px;
		background-color: white;
		border: none;
		cursor: pointer;
	}
	
	button:hover {
		text-decoration: underline;
		color: lightblue;
	}
	
	h2 {
		text-align: center;
	}
	
	.trackContainer {
		position: absolute;
    	top: 20px;
		text-align: left;
	}
	
	backgroundImage {
		width: 100px;
		height: 360px;
	}

</style>

<script>
	
	var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");


	JZZ.synth.OSC.register('Web Audio');
var piano = JZZ.input.Kbd({ at:'piano', active:false, pos:'N', from:'C5', to:'B5', 500: { to: 'G5' }, 600: { to: 'B5' }})

.and(function(){
	
    this.getKeys().setStyle({ borderColor:'#888', borderTopRightRadius:'5px', borderBottomRightRadius:'5px', borderBottomLeftRadius:'5px', borderTopLeftRadius:'5px'});
	
    this.getWhiteKeys('C5', 'B5').setStyle({ backgroundColor:'#fff' }, { });
    this.getBlackKeys('C5', 'B5').setStyle({ backgroundColor:'#000' }, { });
	
	this.getBlackKeys().setStyle
	
	
	this.getKey('C5').setStyle({ backgroundImage:'url("red-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('D5').setStyle({ backgroundImage:'url("purple-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('E5').setStyle({ backgroundImage:'url("yellow-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('F5').setStyle({ backgroundImage:'url("pink-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('G5').setStyle({ backgroundImage:'url("blue-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('A5').setStyle({ backgroundImage:'url("orange-dot.jpg")' }, { backgroundImage:'url("")' });
	this.getKey('B5').setStyle({ backgroundImage:'url("green-dot.jpg")' }, { backgroundImage:'url("")' });
	

  })

.connect(JZZ().openMidiOut());
	
function playJingleBells() {

  JZZ.util.iosSound();

	   piano.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
			.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
			.noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')
		
			.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
			.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
			.noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')
	   
	   		.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
	    	.noteOn(0, 'G5', 50).wait(300).noteOff(0, 'G5')
			.noteOn(0, 'C5', 50).wait(600).noteOff(0, 'C5')
	   		.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
	   		.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
	   
	   		.noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
		    .noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
		    .noteOn(0, 'F5', 50).wait(800).noteOff(0, 'F5')
	   
	   		.noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')
	   		.noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')

			.noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
	        .noteOn(0, 'E5', 50).wait(800).noteOff(0, 'E5')
	   
		    .noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
		    .noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
	        .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
	        .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
	   		.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
	        .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
	        .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
	   		.noteOn(0, 'G5', 50).wait(700).noteOff(0, 'G5');
	 
	
}
	
function stop(){ .                  [color=#FF0000][b] //This is my stop function, which I took form the hello midi template, but currently nothing happens. ive have any advice? [/b][/color]
	
 if(Jazz.isJazz){
Jazz.MidiOut(0x90,60,120);
 }
	
}
	</script>



</body>
</html>
Top
sema
Site Admin
Posts: 358
Joined: Mon Oct 17, 2011 7:28 pm

Re: stop, pause button

Post by sema » Wed May 10, 2017 5:25 pm

Here is a simple example using MIDI-Thru object ( http://jazz-soft.net/doc/JZZ/midithru.html )

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<title>My first Piano Book</title>
<script type="text/javascript" src="JZZ.js"></script>
<script type="text/javascript" src="JZZ.synth.OSC.js"></script>
<script type="text/javascript" src="JZZ.input.Kbd.js"></script>
</head>

<body>
<h2>My first Piano Book</h2>
<div id="piano"></div>
<div class="trackContainer">
  <button onclick='playJingleBells();'> Jingle Bells</button>
  <button onclick='stop();'>Stop</button>
</div>

<script>
JZZ.synth.OSC.register('Web Audio');
var piano = JZZ.input.Kbd({ at:'piano', active:false, pos:'N', from:'C5', to:'B5'})
  .and(function(){
     this.getKeys().setStyle({ borderColor:'#888', borderTopRightRadius:'5px', borderBottomRightRadius:'5px', borderBottomLeftRadius:'5px', borderTopLeftRadius:'5px'});
     this.getWhiteKeys('C5', 'B5').setStyle({ backgroundColor:'#fff' }, { });
     this.getBlackKeys('C5', 'B5').setStyle({ backgroundColor:'#000' }, { });
     this.getKey('C5').setStyle({ backgroundImage:'url("red-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('D5').setStyle({ backgroundImage:'url("purple-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('E5').setStyle({ backgroundImage:'url("yellow-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('F5').setStyle({ backgroundImage:'url("pink-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('G5').setStyle({ backgroundImage:'url("blue-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('A5').setStyle({ backgroundImage:'url("orange-dot.jpg")' }, { backgroundImage:'url("")' });
     this.getKey('B5').setStyle({ backgroundImage:'url("green-dot.jpg")' }, { backgroundImage:'url("")' });
  })
  .connect(JZZ().openMidiOut());
var player;

function playJingleBells() {
  JZZ.util.iosSound();
  player = JZZ.createNew();
  player.connect(piano);
  player.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')

  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')

  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'G5', 50).wait(300).noteOff(0, 'G5')
  .noteOn(0, 'C5', 50).wait(600).noteOff(0, 'C5')
  .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')

  .noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
  .noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
  .noteOn(0, 'F5', 50).wait(800).noteOff(0, 'F5')

  .noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')
  .noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')

  .noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(800).noteOff(0, 'E5')

  .noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
  .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
  .noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
  .noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
  .noteOn(0, 'G5', 50).wait(700).noteOff(0, 'G5');
}

function stop(){
  player._break();
}
</script>

</body>
</html>
Top
sema
Site Admin
Posts: 358
Joined: Mon Oct 17, 2011 7:28 pm

Re: stop, pause button

Post by sema » Sun May 14, 2017 5:40 pm

A little improvement for the code above:

Code: Select all

function stop(){
  player.allNotesOff(0);
  player._break();
}
(This requires the latest version of JZZ-modules)
Top
Post Reply

Return to “JZZ.js”