Permalink
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (120 sloc) 4.12 KB
<!DOCTYPE html>
<html>
<head>
<title>SoundJS: Sound Grid</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<style>
body {
font-family: sans-serif;
font-size: 11px;
}
#content {
width: 1000px;
}
.gridBox {
float: left;
background-repeat: no-repeat;
background-position: 0 0px;
background-color: #222;
background-size: 320px 300px;
border: 0px solid #666;
width: 320px;
height: 100px;
}
.gridBox:hover {
background-position: 0 -100px;
background-color: #322;
cursor: pointer;
}
.gridBox.active, .gridbox.active:hover {
background-position: 0 -200px;
cursor: auto;
}
</style>
</head>
<body onload="init();">
<header class="SoundJS">
<h1>Sound Grid</h1>
<p>Click audio instances in the grid to play them.</p>
</header>
<!-- We'll use the ID of the div to determine which audio file to play.
These id's match the ones passed into the audioList array. -->
<div id="content">
<div id="1" onclick="playSound(this)" class="gridBox"></div>
<div id="2" onclick="playSound(this)" class="gridBox"></div>
<div id="3" onclick="playSound(this)" class="gridBox"></div>
<div id="4" onclick="playSound(this)" class="gridBox"></div>
<div id="5" onclick="playSound(this)" class="gridBox"></div>
<div id="6" onclick="playSound(this)" class="gridBox"></div>
<div id="7" onclick="playSound(this)" class="gridBox"></div>
<div id="8" onclick="playSound(this)" class="gridBox"></div>
<div id="9" onclick="playSound(this)" class="gridBox"></div>
<div id="10" onclick="playSound(this)" class="gridBox"></div>
<div id="11" onclick="playSound(this)" class="gridBox"></div>
<div id="12" onclick="playSound(this)" class="gridBox"></div>
</div>
<div id="error">
<h2>Sorry!</h2>
<p>SoundJS is not currently supported in your browser.</p>
<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
with the device and browser you are using. Thank you.</p>
</div>
<script type="text/javascript" src="../lib/soundjs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var preload;
function init() {
if (!createjs.Sound.initializeDefaultPlugins()) {
document.getElementById("error").style.display = "block";
document.getElementById("content").style.display = "none";
return;
}
//examples.showDistractor("content");
var assetsPath = "../_assets/audio/";
var sounds = [
{src: "Game-Break.ogg", id: 1},
{src: "Game-Spawn.ogg", id: 2},
{src: "Game-Shot.ogg", id: 3},
{src: "GU-StealDaisy.ogg", id: 4},
{src: "Humm.ogg", id: 5},
{src: "R-Damage.ogg", id: 6},
{src: "Thunder1.ogg", id: 7},
{src: "S-Damage.ogg", id: 8},
{src: "U-CabinBoy3.ogg", id: 9},
{src: "ToneWobble.ogg", id: 10},
{src: "Game-Death.ogg", id: 11},
{src: "Game-Break.ogg", id: 12} //OJR would prefer a new sound rather than a copy
];
createjs.Sound.alternateExtensions = ["mp3"]; // add other extensions to try loading if the src file extension is not supported
createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this)); // add an event listener for when load is completed
createjs.Sound.registerSounds(sounds, assetsPath);
}
function soundLoaded(event) {
//examples.hideDistractor();
var div = document.getElementById(event.id);
div.style.backgroundImage = "url('../_assets/art/audioButtonSheet.png')";
}
function stop() {
if (preload != null) {
preload.close();
}
createjs.Sound.stop();
}
function playSound(target) {
//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
var instance = createjs.Sound.play(target.id);
if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) {
return;
}
target.className = "gridBox active";
instance.addEventListener("complete", function (instance) {
target.className = "gridBox";
});
}
</script>
</body>
</html>