Skip to content

Commit

Permalink
Minor demo improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@lannymcnie
lannymcnie committed Sep 18, 2017
1 parent 0defb6a commit e10a583
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 20 deletions.
30 changes: 17 additions & 13 deletions examples/04_SoundTween.html 100644 → 100755
View file
Expand Up @@ -14,7 +14,7 @@
<header class="SoundJS">
<h1>Sound Tween</h1>

<p>This example shows how to tween volume and pan. Note that HTML audio does not support panning.</p>
<p>This example shows how to tween volume and pan. <b>Note that HTML audio does not support panning</b>.</p>
</header>

<div class="content" id="content">
Expand Down Expand Up @@ -129,29 +129,33 @@ <h2>Sorry!</h2>

function initSoundTween() {
setMessage("Volume Down: 0.0");
tween = createjs.Tween.get(soundInstance, {loop: true})
tween = createjs.Tween.get(soundInstance, {loop: true, onChange:handleSoundChange})
.to({volume: 0.0}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Up: 0.5"])
.wait(baseTime)
.to({volume: 0.5}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Up: 1.0"])
.wait(baseTime)
.to({volume: 1.0}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Down: 0.5"])
.wait(baseTime)
.to({volume: 0.5}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Pan Right: 1.0"])
.wait(baseTime)
.to({pan: 1}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
.wait(baseTime)
.to({pan: 0}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Pan Left: -1.0"])
.wait(baseTime)
.to({pan: -1}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
.wait(baseTime)
.to({pan: 0}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Down: 0.0, Pan Left: -1.0"])
.wait(baseTime)
.to({pan: -1, volume: 0.0}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Up: 1.0, Pan Right: 1.0"])
.wait(baseTime)
.to({pan: 1, volume: 1}, 6 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Down: 0.5, Pan Center: 0.0"])
.wait(baseTime)
.to({pan: 0, volume: 0.5}, 3 * baseTime)
.wait(baseTime).call(setMessage, ["Volume Down: 0.0"]);
.wait(baseTime)
}

function handleSoundChange() {
setMessage("<b>Volume Up:" + soundInstance.volume.toFixed(2) +" Pan Right:" + soundInstance.pan.toFixed(2)) + "</b>";
}

function setMessage(message) {
Expand Down
39 changes: 32 additions & 7 deletions examples/05_AudioSprite.html 100644 → 100755
View file
Expand Up @@ -33,6 +33,21 @@ <h2>Sorry!</h2>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->

<style>
.red {
color:red;
font-size:large;
}
.blue {
color:#0b93d5;
font-size:small;
}
.orange {
color:orange;
font-size:xx-large;

}
</style>
<script id="editable">
var displayMessage; // the HTML element we use to display messages to the user

Expand Down Expand Up @@ -95,7 +110,11 @@ <h2>Sorry!</h2>
return;
}

this.sprite = ["pew", "hit", "explode"]; // this code is not needed for sprites, it is used for the looping effect
this.sprite = [
{id:"pew", class:"blue"},
{id:"hit", class:"red"},
{id:"explode", class:"orange"}
]; // this code is not needed for sprites, it is used for the looping effect
var assetsPath = "../_assets/audio/";
var sounds = [
// This is an audio sprite. The sprite property tells SoundJS what ids to use for playback, with time to start playback and length of playback
Expand Down Expand Up @@ -133,15 +152,18 @@ <h2>Sorry!</h2>
this.currentStep = 0;
this.loops = Math.floor((Math.random() * this.MAX_LOOPS)); // random between 0 and MAX_LOOPS -1

this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep], {loop: this.loops});
var spriteData = this.sprite[this.currentStep];

this.soundInstance = createjs.Sound.play(spriteData.id, {loop: this.loops});
this.soundInstance.addEventListener("loop", this.loopProxy);
this.soundInstance.addEventListener("complete", createjs.proxy(this.nextAudioRelay, this));
this.displayStatus.innerHTML = this.sprite[this.currentStep];
this.displayStatus.innerHTML = '<div class='+spriteData.class+'>'+spriteData.id+'</div>';
},

// update display text
handleLoop: function () {
this.displayStatus.innerHTML = this.displayStatus.innerHTML + " " + this.sprite[this.currentStep];
var spriteData = this.sprite[this.currentStep];
this.displayStatus.innerHTML = this.displayStatus.innerHTML + " " + '<div id="effect" class='+spriteData.class+'>'+spriteData.id+'</div>';
},

// kick off delayed next step of audio loop
Expand All @@ -152,16 +174,19 @@ <h2>Sorry!</h2>

delayedNextAudio: function () {
this.currentStep++;
this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep], {loop: this.loops});

var spriteData = this.sprite[this.currentStep];

this.soundInstance = createjs.Sound.play(spriteData.id, {loop: this.loops});
this.soundInstance.addEventListener("loop", this.loopProxy);
this.soundInstance.addEventListener("complete", createjs.proxy(this.handleFinalAudio, this));
this.displayStatus.innerHTML = this.sprite[this.currentStep];
this.displayStatus.innerHTML = '<div class='+spriteData.class+'>'+spriteData.id+'</div>';
},

// final step of audio loop
handleFinalAudio: function () {
this.currentStep++;
this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep]);
this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep].id);
this.soundInstance.addEventListener("complete", createjs.proxy(this.nextAudioRelay, this));
this.handleLoop();

Expand Down

0 comments on commit e10a583

Please sign in to comment.