Fix up examples

pixijs · Feb 15, 2024 · 4a27a89 · 4a27a89
1 parent c8baee3
commit 4a27a89
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 61 deletions.
diff --git a/examples/client/demo.js b/examples/client/demo.js
@@ -1,17 +1,17 @@
-const manifest = {
-    loop1: 'resources/loops/loop1.mp3',
-    loop2: 'resources/loops/loop2.mp3',
-    loop3: 'resources/loops/loop3.mp3',
-    loop4: 'resources/loops/loop4.mp3',
-    bird: 'resources/bird.mp3',
-    boing: 'resources/boing.mp3',
-    buzzer: 'resources/buzzer.mp3',
-    car: 'resources/car.mp3',
-    chime: 'resources/chime.mp3',
-    success: 'resources/success.mp3',
-    sword: 'resources/sword.mp3',
-    whistle: 'resources/whistle.mp3',
-};
+const manifest = [
+    { alias: 'loop1', src: 'resources/loops/loop1.mp3' },
+    { alias: 'loop2', src: 'resources/loops/loop2.mp3' },
+    { alias: 'loop3', src: 'resources/loops/loop3.mp3' },
+    { alias: 'loop4', src: 'resources/loops/loop4.mp3' },
+    { alias: 'bird', src: 'resources/bird.mp3' },
+    { alias: 'boing', src: 'resources/boing.mp3' },
+    { alias: 'buzzer', src: 'resources/buzzer.mp3' },
+    { alias: 'car', src: 'resources/car.mp3' },
+    { alias: 'chime', src: 'resources/chime.mp3' },
+    { alias: 'success', src: 'resources/success.mp3' },
+    { alias: 'sword', src: 'resources/sword.mp3' },
+    { alias: 'whistle', src: 'resources/whistle.mp3' },
+];
 
 PIXI.Assets.addBundle('demo', manifest);
 PIXI.Assets.loadBundle('demo').then(() =>

diff --git a/examples/client/sprites.js b/examples/client/sprites.js
@@ -41,18 +41,20 @@ const sprites = {
     },
 };
 const playhead = new PIXI.Graphics()
-    .beginFill(0xff0000)
-    .drawRect(0, 0, 1, 100);
+    .rect(0, 0, 1, 100)
+    .fill(0xff0000);
 
 playhead.x = -1;
 const sound = PIXI.sound.Sound.from({
     url: 'resources/sprite.mp3',
     sprites,
     singleInstance: true,
     preload: true,
-    loaded()
+    async loaded()
     {
-        const app = new PIXI.Application({
+        const app = new PIXI.Application();
+
+        await app.init({
             width: 1024,
             height: 100,
             backgroundColor: 0xffffff,

diff --git a/examples/demo.html b/examples/demo.html
@@ -11,7 +11,7 @@
         <link rel="stylesheet" href="css/range.css">
         <link rel="stylesheet" href="css/examples.css?v=2">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body ontouchstart="">
@@ -147,20 +147,20 @@ <h1><img src="resources/logo.svg" class="logo" alt="PixiJS" />Sound <small>Demo<
                 </div>
             </div>
         <pre><code type="javascript">// List of files to load
-const manifest = {
-    loop1: 'resources/loops/loop1.mp3',
-    loop2: 'resources/loops/loop2.mp3',
-    loop3: 'resources/loops/loop3.mp3',
-    loop4: 'resources/loops/loop4.mp3',
-    bird: 'resources/bird.mp3',
-    boing: 'resources/boing.mp3',
-    buzzer: 'resources/buzzer.mp3',
-    car: 'resources/car.mp3',
-    chime: 'resources/chime.mp3',
-    success: 'resources/success.mp3',
-    sword: 'resources/sword.mp3',
-    whistle: 'resources/whistle.mp3'
-};
+const manifest = [
+    { alias: 'loop1', src: 'resources/loops/loop1.mp3' },
+    { alias: 'loop2', src: 'resources/loops/loop2.mp3' },
+    { alias: 'loop3', src: 'resources/loops/loop3.mp3' },
+    { alias: 'loop4', src: 'resources/loops/loop4.mp3' },
+    { alias: 'bird', src: 'resources/bird.mp3' },
+    { alias: 'boing', src: 'resources/boing.mp3' },
+    { alias: 'buzzer', src: 'resources/buzzer.mp3' },
+    { alias: 'car', src: 'resources/car.mp3' },
+    { alias: 'chime', src: 'resources/chime.mp3' },
+    { alias: 'success', src: 'resources/success.mp3' },
+    { alias: 'sword', src: 'resources/sword.mp3' },
+    { alias: 'whistle', src: 'resources/whistle.mp3' },
+];
 
 // Add to the PIXI loader
 PIXI.Assets.addBundle('demo', manifest);

diff --git a/examples/filters.html b/examples/filters.html
@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="css/examples.css?v=2">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.0/html.sortable.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>

diff --git a/examples/index.html b/examples/index.html
@@ -16,7 +16,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script src="https://cdn.rawgit.com/aidanlister/jquery-stickytabs/1.2.1/jquery.stickytabs.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>
@@ -130,7 +130,7 @@ <h3>Filetypes</h3>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#filetypes1">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="filetypes1" class="javascript">PIXI.Assets.add('applause', 'resources/applause.{ogg,mp3}');
+                <pre><code id="filetypes1" class="javascript">PIXI.Assets.add({ alias: 'applause', src: 'resources/applause.{ogg,mp3}' });
 PIXI.Assets.load('applause').then(sound => sound.play());</code></pre>
 
                 <p>Alternatively, if you don't plan to use Assets (typically because you're using a bundler like Parcel or Webpack), but you still would like to resolve multiple files, you can choose from multiple URLs.</p>
@@ -160,7 +160,7 @@ <h3>Preloading</h3>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#loaded2">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="loaded2" class="javascript">PIXI.Assets.add('bird', 'resources/bird.mp3');
+                <pre><code id="loaded2" class="javascript">PIXI.Assets.add({ alias: 'bird', src: 'resources/bird.mp3' });
 PIXI.Assets.load('bird').then(sound => sound.play());</code></pre>
             </div>
             <div class="tab-pane fade" id="section-volume">
@@ -242,7 +242,8 @@ <h3>Utilities</h3>
                 <p>First setup an Application to render the waveform.</p>
                 <code class="hidden" id="render-clear">waveform.stage.removeChildren();</code>
                 <canvas class="canvas" width="1024" height="128" id="waveform"></canvas>
-                <pre><code data-autorun class="javascript">window.waveform = new PIXI.Application({
+                <pre><code data-autorun class="javascript">window.waveform = new PIXI.Application();
+window.waveform.init({
     width: 1024,
     height: 128,
     view: document.getElementById('waveform'),
@@ -252,24 +253,24 @@ <h3>Utilities</h3>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#render3" data-beforeCode="#render-clear">
                     <span class="glyphicon glyphicon-play"></span> Run
                 </button>
-                <pre><code id="render3" class="javascript">PIXI.Assets.add('applause', 'resources/applause.mp3');
-PIXI.Assets.load('applause').then(sound => {
-    const baseTexture = PIXI.sound.utils.render(sound, {
-        width: waveform.renderer.width,
-        height: waveform.renderer.height,
-        fill: '#999'
-    });
-    const playhead = new PIXI.Graphics()
-        .beginFill(0xff0000)
-        .drawRect(0, 0, 1, waveform.renderer.height);
-    const sprite = new PIXI.Sprite(
-        new PIXI.Texture(baseTexture)
-    );
-    waveform.stage.addChild(sprite, playhead);
-    sound.play().on('progress', function(value) {
-        playhead.x = baseTexture.width * value;
-    });
-});</code></pre>
+                <pre><code id="render3" class="javascript">PIXI.Assets.add({ alias: 'applause', src: 'resources/applause.mp3' });
+const sound = await PIXI.Assets.load('applause');
+const baseTexture = PIXI.sound.utils.render(sound, {
+    width: waveform.renderer.width,
+    height: waveform.renderer.height,
+    fill: '#999'
+});
+const playhead = new PIXI.Graphics()
+    .rect(0, 0, 1, waveform.renderer.height)
+    .fill(0xff0000);
+const sprite = new PIXI.Sprite(
+    new PIXI.Texture(baseTexture)
+);
+waveform.stage.addChild(sprite, playhead);
+sound.play().on('progress', function(value) {
+    playhead.x = baseTexture.width * value;
+});
+</code></pre>
 
                 <p>Create a simple sine-wave tone.</p>
                 <button class="btn btn-danger btn-lg pull-right play" data-code="#sine-tone" data-beforeCode="#render-clear">

diff --git a/examples/sprites.html b/examples/sprites.html
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="css/examples.css?v=2">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/monokai-sublime.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/javascript.min.js"></script>
-        <script src="https://pixijs.download/dev/pixi.min.js"></script>
+        <script src="https://pixijs.download/next-v8/pixi.min.js"></script>
         <script src="../dist/pixi-sound.js"></script>
     </head>
     <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,9 +74,9 @@
     "@pixi/extension-scripts": "^2.0.0",
     "copyfiles": "^2.4.1",
     "mkdirp": "^1.0.4",
-    "pixi.js": "^8.0.0-X"
+    "pixi.js": "^8.0.0-0"
   },
   "peerDependencies": {
-    "pixi.js": "^8.0.0-X"
+    "pixi.js": ">-8.0.0-0"
   }
 }