Merge branch 'feature/multi-play' into develop

Stinkstudios · Feb 27, 2017 · c89c79c · c89c79c
2 parents 801c0ba + 2624356
commit c89c79c
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 3 deletions.
diff --git a/examples/js/example.js b/examples/js/example.js
@@ -12,8 +12,8 @@
         '<li>Touch locked (mobile): ' + sono.isTouchLocked + '</li>' +
         '<li>Supported extensions: ' + sono.extensions.join(', ') + '</li>';
 
-    var baseURL = 'examples/audio/';
-    // var baseURL = 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/';
+    // var baseURL = 'examples/audio/';
+    var baseURL = 'https://dl.dropboxusercontent.com/u/15470024/prototypes/audio/';
     // var baseURL = 'http://prototypes.stinkdigital.com/webaudio/sono/examples/audio/';
 
     var sound,

diff --git a/examples/js/pixi-multi-play.js b/examples/js/pixi-multi-play.js
diff --git a/examples/pixi-multi-play.html b/examples/pixi-multi-play.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>sono - examples - PixiJS / Multi play</title>
+    <link href="favicon.ico" rel="shortcut icon">
+    <link href="css/styles.css" rel="stylesheet">
+    <link href="css/paraiso.light.css" rel="stylesheet">
+</head>
+
+<body>
+    <section>
+        <header>
+            <h2>PixiJS / Multi play</h2>
+        </header>
+
+        <div class="Controls">
+            <p>Arrow keys to move around, space to shoot.</p>
+        </div>
+
+        <div class="Controls" data-container></div>
+        <div class="Controls" data-info></div>
+
+        <pre>
+            <code class="js">
+import {loaders} from 'pixi.js';
+
+const ext = sono.canPlay.ogg ? 'ogg' : 'mp3';
+
+if (sono.hasWebAudio) {
+    const {Resource} = loaders;
+    Resource.setExtensionLoadType(ext, Resource.LOAD_TYPE.XHR);
+    Resource.setExtensionXhrType(ext, Resource.XHR_RESPONSE_TYPE.BUFFER);
+}
+
+const sounds = [{
+    name: 'music',
+    url: `audio/space-shooter.${ext}`,
+    loop: true,
+    volume: 0.8
+}, {
+    name: 'shoot',
+    url: `audio/shoot3.${ext}`,
+    volume: 0.4,
+    multiPlay: true
+}, {
+    name: 'explode',
+    url: `audio/explode2.${ext}`,
+    volume: 0.9,
+    multiPlay: true
+}];
+
+const loader = new loaders.Loader();
+
+loader.add(sounds);
+
+loader.onComplete.once(() => {
+    sounds.forEach(sound => {
+        const src = loader.resources[sound.name].data;
+        const config = Object.assign({}, sound, {src});
+        sono.create(config);
+    });
+
+    sono.getSound('shoot').effect.reverb();
+    sono.play('music');
+});
+
+loader.load();
+            </code>
+        </pre>
+
+    </section>
+
+    <script>
+        if (window.location.search.slice(1) === 'nowebaudio') {
+            window.AudioContext = window.webkitAudioContext = undefined;
+        }
+    </script>
+    <script src="js/highlight.pack.js"></script>
+    <script>
+        hljs.initHighlightingOnLoad();
+    </script>
+    <script src="../dist/sono.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.0/pixi.min.js"></script>
+    <script src="js/pixi-multi-play.js"></script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -53,7 +53,7 @@ <h1>sono</h1>
         </div>
         <pre>
             <code class="js">
-    var sound = sono.createSound({
+    var sound = sono.create({
         src: [ 'dnb-loop-3.ogg', 'dnb-loop-3.mp3' ],
         loop: true,
         volume: 1
@@ -676,6 +676,7 @@ <h2>more examples</h2>
         </header>
         <nav>
             <ul>
+                <li><a href="examples/pixi-multi-play.html">pixi.js</a></li>
                 <li><a href="examples/threed.html">3d</a></li>
                 <li><a href="examples/oscillator.html">oscillator</a></li>
                 <li><a href="examples/recorder.html">recorder</a></li>