Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Upgrade to PixiJS v8 #261

Merged
merged 15 commits into from
Feb 15, 2024
Merged

Feature: Upgrade to PixiJS v8 #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
cd064ae
update to pixi v8
Zyie Jan 3, 2024
67114f0
Update to the latest extension-scripts
bigtimebuddy Jan 19, 2024
cbc3e38
Merge branch 'main' into feature/v8
bigtimebuddy Jan 19, 2024
c8baee3
Fix linting issues
bigtimebuddy Feb 15, 2024
4a27a89
Fix up examples
bigtimebuddy Feb 15, 2024
a4441bb
Fix deprecations in app options
bigtimebuddy Feb 15, 2024
5b3afb3
Update node version
bigtimebuddy Feb 15, 2024
410ad11
Update dependencies in actions
bigtimebuddy Feb 15, 2024
ae324ef
Revert ubuntu change
bigtimebuddy Feb 15, 2024
0250c53
Fix tests
bigtimebuddy Feb 15, 2024
952a964
Use latest ubuntu
bigtimebuddy Feb 15, 2024
28fcff0
Update package.json
bigtimebuddy Feb 15, 2024
3a7d3fa
Suppress console warns in tests
bigtimebuddy Feb 15, 2024
d37565c
Merge branch 'main' into feature/v8
bigtimebuddy Feb 15, 2024
15ff25c
Update readme
bigtimebuddy Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions .github/workflows/nodejs.yml → .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Node.js CI
name: Automation
on:
push:
branches: [ '**' ]
Expand All @@ -15,17 +15,15 @@ jobs:
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: ${{ secrets.AWS_REGION }}
SOURCE_DIR: 'deploy'
runs-on: ubuntu-20.04
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
- name: Install xvfb
run: sudo apt-get install xvfb
- name: Use Node.js 16.x
uses: actions/setup-node@v3
- name: Use Node.js 18.x
uses: actions/setup-node@v4
with:
node-version: 16
- name: Install npm
run: npm install -g npm@8
node-version: 18
- name: Install dependencies
run: npm ci

Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ If you're using a `<script>` element to import `@pixi/sound` into your project,
|---|---|
| v5.x - v6.x | v4.x |
| v7.x | v5.x |
| v8.x | v6.x |

### Resources

Expand Down
28 changes: 14 additions & 14 deletions examples/client/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(() =>
Expand Down
12 changes: 7 additions & 5 deletions examples/client/sprites.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,24 @@ 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,
view: document.getElementById('waveform'),
canvas: document.getElementById('waveform'),
});
const baseTexture = PIXI.sound.utils.render(sound, {
width: 1024,
Expand Down
30 changes: 15 additions & 15 deletions examples/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.min.js"></script>
<script src="../dist/pixi-sound.js"></script>
</head>
<body ontouchstart="">
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion examples/filters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
47 changes: 24 additions & 23 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -242,34 +242,35 @@ <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'),
canvas: document.getElementById('waveform'),
backgroundColor: 0xffffff
});
</code></pre>
<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">
Expand Down
2 changes: 1 addition & 1 deletion examples/sprites.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading