stop, pause button

Asynchronous MIDI library for Node.js and HTML

stop, pause button

Postby 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>
ioetbc
 
Posts: 1
Joined: Fri Apr 28, 2017 4:37 am

Re: stop, pause button

Postby 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>
sema
Site Admin
 
Posts: 306
Joined: Mon Oct 17, 2011 7:28 pm

Re: stop, pause button

Postby 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)
sema
Site Admin
 
Posts: 306
Joined: Mon Oct 17, 2011 7:28 pm


Return to JZZ.js

Who is online

Users browsing this forum: No registered users and 1 guest

cron