Skip to content

Commit 4560f2d

Browse files
author
Thomas Dodds
committed
resolved PR comments and styling in line with guide for docs site embeds
1 parent 116757a commit 4560f2d

File tree

9 files changed

+136
-40
lines changed

9 files changed

+136
-40
lines changed

examples/example_pitchbend/Superpowered.js renamed to examples/example_pitchbend/assets/Superpowered.js

File renamed without changes.

examples/example_pitchbend/processor.js renamed to examples/example_pitchbend/assets/processor.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "./Superpowered.js";
22

33
class MyProcessor extends SuperpoweredWebAudio.AudioWorkletProcessor {
4-
// runs after the constructor
54
cancelledPitchBend = true;
65

76
onReady() {
@@ -13,7 +12,6 @@ class MyProcessor extends SuperpoweredWebAudio.AudioWorkletProcessor {
1312
}
1413

1514
onMessageFromMainScope(message) {
16-
// console.log('onMessageFromMainScope', message)
1715
if (message.SuperpoweredLoaded) {
1816
this.player.openMemory(this.Superpowered.arrayBufferToWASM(message.SuperpoweredLoaded.buffer), false, false);
1917
this.player.play();
@@ -33,11 +31,10 @@ class MyProcessor extends SuperpoweredWebAudio.AudioWorkletProcessor {
3331
processAudio(inputBuffer, outputBuffer, buffersize, parameters) {
3432
if (this.pitchBend) {
3533
this.player.pitchBend(this.pitchBend.maxPercent, this.pitchBend.bendStretch, this.pitchBend.faster, this.pitchBend.holdMs);
36-
if (this.cancelledPitchBend) this.cancelledPitchBend = false;
3734
} else if (!this.cancelledPitchBend) {
3835
this.player.endContinuousPitchBend();
39-
this.cancelledPitchBend = true;
4036
}
37+
this.cancelledPitchBend = !this.cancelledPitchBend;
4138
this.currentPitchBend = this.player.getCurrentPitchBendPercent();
4239
this.currentPitchBendMsOffset = this.player.getBendOffsetMs();
4340
if (!this.player.processStereo(outputBuffer.pointer, false, buffersize, 1)) this.Superpowered.memorySet(outputBuffer.pointer, 0, buffersize * 8);

examples/example_pitchbend/superpowered-npm.wasm renamed to examples/example_pitchbend/assets/superpowered-npm.wasm

File renamed without changes.

‎examples/example_pitchbend/assets/superpowered.svg‎

Lines changed: 14 additions & 0 deletions
Loading

examples/example_pitchbend/track.mp3 renamed to examples/example_pitchbend/assets/track.mp3

File renamed without changes.

‎examples/example_pitchbend/assets/wave.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎examples/example_pitchbend/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
33
<head>
44
<title>Superpowered WebAssembly Audio Player Time Stretching and Pitch Shifting Example</title>
55
<script type="module" src="./polyfill_worklet_import.js"></script>
6+
<link href="/style.css" rel="stylesheet" />
67
</head>
78
<body>
8-
<div id="content">Initializing...</div>
9+
<div class="container">
10+
<img class="logo" src="/assets/superpowered.svg" />
11+
<div class="controls">
12+
<h2>AAP pitch/speed controls</h2>
13+
<p>A demonstration of pitch bend, pitch shift and playback rate changes with the Advanced Audio Player class</p>
14+
<div id="content">Initializing...</div>
15+
</div>
16+
</div>
17+
918
<script src="main.js" type="module"></script>
1019
</body>
1120
</html>

‎examples/example_pitchbend/main.js‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "./Superpowered.js";
1+
import "./assets/Superpowered.js";
22

33
var webaudioManager = null; // The SuperpoweredWebAudio helper class managing Web Audio for us.
44
var Superpowered = null; // A Superpowered instance.
@@ -10,11 +10,14 @@ var pbPerc = null;
1010

1111
function changePitchShift(e) {
1212
// limiting the new pitch shift value
13-
let value = parseInt(e.target.value);
14-
pitchShift += value;
15-
if (pitchShift < -12) pitchShift = -12; else if (pitchShift > 12) pitchShift = 12;
13+
// let value = parseInt(e.target.value);
14+
// pitchShift += value;
15+
16+
pitchShift = Math.min(12, Math.max(-12, pitchShift + parseInt(e.target.value)));
17+
18+
// if (pitchShift < -12) pitchShift = -12; else if (pitchShift > 12) pitchShift = 12;
1619
// displaying the value
17-
document.getElementById('pitch-shift-display').innerText = ' pitch shift: ' + ((pitchShift < 1) ? pitchShift : '+' + pitchShift) + ' ';
20+
document.getElementById('pitch-shift-display').textContent = ' pitch shift: ' + ((pitchShift < 1) ? pitchShift : '+' + pitchShift) + ' ';
1821
// sending the new value to the audio node
1922
audioNode.sendMessageToAudioScope({ 'pitchShift': pitchShift });
2023
}
@@ -26,23 +29,20 @@ function changeRate() {
2629
if (value == 10000) text = 'original tempo';
2730
else if (value < 10000) text = '-' + (100 - value / 100).toPrecision(2) + '%';
2831
else text = '+' + (value / 100 - 100).toPrecision(2) + '%';
29-
document.getElementById('rateDisplay').innerText = text;
32+
document.getElementById('rateDisplay').textContent = text;
3033
// sending the new rate to the audio node
3134
audioNode.sendMessageToAudioScope({ rate: value });
3235
}
3336

3437
function changePitchBend(e) {
35-
let faster = 1;
38+
console.log(Number(document.getElementById('holdMsSelect').value));
3639
const value = e.target.value;
37-
if (value < 0) {
38-
faster = 0;
39-
}
4040
audioNode.sendMessageToAudioScope({
4141
'pitchBend': true,
4242
maxPercent: Math.abs(value/100),
4343
bendStretch: 0,
44-
faster,
45-
holdMs: 100
44+
faster: value < 0 ? 0 : 1,
45+
holdMs: Number(document.getElementById('holdMsSelect').value)
4646
});
4747
}
4848

@@ -60,7 +60,7 @@ function changeBendDbl() {
6060
maxPercent: 0,
6161
bendStretch: 0,
6262
faster: 0,
63-
holdMs: 100
63+
holdMs: Number(document.getElementById('holdMsSelect').value)
6464
});
6565
}
6666

@@ -69,11 +69,11 @@ function togglePlayback(e) {
6969
let button = document.getElementById('playPause');
7070
if (button.value == 1) {
7171
button.value = 0;
72-
button.innerText = 'Play audio';
72+
button.textContent = 'Play audio';
7373
webaudioManager.audioContext.suspend();
7474
} else {
7575
button.value = 1;
76-
button.innerText = 'Pause audio';
76+
button.textContent = 'Pause audio';
7777
webaudioManager.audioContext.resume();
7878
}
7979
}
@@ -82,22 +82,25 @@ function onMessageFromAudioScope(message) {
8282
if (message.loaded) {
8383
// UI: innerHTML may be ugly but keeps this example small
8484
content.innerHTML = '\
85-
<h1>Superpowered AAP pitch bending</h1>\
8685
<button id="playPause" value="0">Play audio</button>\
87-
<h2>Pitch bend percentage</h2>\
88-
<div style="display: flex; justify-content: space-between;"><span>-30%</span><span>0%</span><span>+30%</span></div>\
86+
<h3>Pitch bend holdMs</h3>\
87+
<select id="holdMsSelect"><option>40</option><option>200</option><option>300</option><option>600</option><option>1000</option></select><span>ms</span>\
88+
<h3>Pitch bend percentage</h3>\
89+
<div style="width: 100%; display: flex; justify-content: space-between;"><span>-30%</span><span>0%</span><span>+30%</span></div>\
8990
<input id="pitchBend" type="range" min="-30" max="30" value="0" style="width: 100%">\
90-
<div style="background: #909090; width: 100%; postion: relative;" id="bend-container"><div style="width: 50%; height: 10px; background: black;" id="bend-value"></div></div>\
91-
<div style="text-align: center;"><span>Current pitch bend percentage <span id="pitch-bend-percentage">100</span>%</span></div><br />\
91+
<div style="overflow: hidden; border-radius: 5px; background: #909090; width: 100%; postion: relative;" id="bend-container"><div style="width: 50%; height: 10px; background: black;" id="bend-value"></div></div>\
92+
<div style="text-align: center;"><span><span id="pitch-bend-percentage">100</span>%</span></div><br />\
9293
<button id="reset-bend">Reset pitch bend</button>\
93-
<h2>Playback Rate:</h2>\
94-
<p id="rateDisplay">original tempo</p>\
95-
<div style="display: flex; justify-content: space-between;"><span>-50%</span><span>+100%</span></div>\
94+
<h3>Playback rate</h3>\
95+
<span id="rateDisplay">original tempo</span>\
96+
<div style="width: 100%; display: flex; justify-content: space-between;"><span>-50%</span><span>+100%</span></div>\
9697
<input id="rateSlider" type="range" min="5000" max="20000" value="10000" style="width: 100%">\
9798
<button id="reset-rate">Reset playback rate</button> <br /><br />\
99+
<div>\
98100
<button id="pitchMinus" value="-1">-</button>\
99101
<span id="pitch-shift-display"> pitch shift: 0 </span>\
100102
<button id="pitchPlus" value="1">+</button>\
103+
</div>\
101104
';
102105
document.getElementById('rateSlider').addEventListener('input', changeRate);
103106
document.getElementById('pitchBend').addEventListener('input', changePitchBend);
@@ -112,7 +115,7 @@ function onMessageFromAudioScope(message) {
112115
}
113116
if (message.pitchBendDetails && document.getElementById('bend-value')) {
114117
if (pbPerc && (typeof message.pitchBendDetails.currentPitchBend !== 'undefined')) {
115-
pbPerc.innerText = message.pitchBendDetails.currentPitchBend * 100;
118+
pbPerc.textContent = message.pitchBendDetails.currentPitchBend * 100;
116119
document.getElementById('bend-value').style.width = convertRange(message.pitchBendDetails.currentPitchBend * 100, [70, 130], [0, 100]) + '%';
117120
document.getElementById('bend-value').style.background = message.pitchBendDetails.currentPitchBend === 1 ? 'black' : message.pitchBendDetails.currentPitchBend < 1 ? 'red' : 'green';
118121
}
@@ -130,10 +133,9 @@ function requestPitchBendDetails() {
130133

131134
// when the START button is clicked
132135
async function start() {
133-
// content.innerText = 'Creating the audio context and node...';
134136
webaudioManager = new SuperpoweredWebAudio(44100, Superpowered);
135137
currentPath = window.location.href.substring(0, window.location.href.lastIndexOf('/'));
136-
audioNode = await webaudioManager.createAudioNodeAsync(currentPath + '/processor.js?date=' + Date.now(), 'MyProcessor', onMessageFromAudioScope);
138+
audioNode = await webaudioManager.createAudioNodeAsync(window.location.href + '/assets/processor.js?date=' + Date.now(), 'MyProcessor', onMessageFromAudioScope);
137139
// audioNode -> audioContext.destination (audio output)
138140
webaudioManager.audioContext.suspend();
139141
audioNode.connect(webaudioManager.audioContext.destination);
@@ -143,18 +145,18 @@ async function start() {
143145
}
144146

145147
async function loadFromMainThread() {
146-
Superpowered.downloadAndDecode(currentPath + '/track.mp3', audioNode);
148+
Superpowered.downloadAndDecode(window.location.href + '/assets/track.mp3', audioNode);
147149
}
148150

149151
async function loadJS() {
150-
Superpowered = await SuperpoweredGlue.Instantiate('ExampleLicenseKey-WillExpire-OnNextUpdate', 'http://localhost:8080/superpowered-npm.wasm');
152+
Superpowered = await SuperpoweredGlue.Instantiate('ExampleLicenseKey-WillExpire-OnNextUpdate', `${window.location.href}/assets/superpowered-npm.wasm`);
151153

152154
// display the START button
153155
content = document.getElementById('content');
154156
content.innerHTML = `<div>
155-
<button id="loadFromMainThread">Start</button>
157+
<button id="startApplication">Start</button>
156158
</div>`;
157-
document.getElementById('loadFromMainThread').addEventListener('click', loadFromMainThread);
159+
document.getElementById('startApplication').addEventListener('click', loadFromMainThread);
158160
start();
159161
}
160162

‎examples/example_pitchbend/style.css‎

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,59 @@
1-
#pitchBend {
2-
transform: rotate(-90deg) translateY(calc(300 / 2));
3-
transform-origin: left;
4-
position: absolute;
5-
}
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
text-align: center;
5+
height: 100vh;
6+
background-image: url(/assets/wave.svg);
7+
background-size: cover;
8+
overflow-y: auto;
9+
margin: 0;
10+
}
11+
12+
13+
button {
14+
background: #1254fe;
15+
padding: 10px 20px;
16+
border-radius: 15px;
17+
color: white;
18+
border: 0;
19+
font-weight: 800;
20+
font-size: 16px;
21+
cursor: pointer;
22+
}
23+
button:disabled {
24+
opacity: 0.2;
25+
cursor: not-allowed;
26+
}
27+
28+
.container {
29+
font-family: Arial, Helvetica, sans-serif;
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
34+
color: black;
35+
flex-grow: 0;
36+
max-width: 400px;
37+
}
38+
39+
.logo {
40+
height: 35px;
41+
max-width: 100%;
42+
margin-top: 20px;
43+
}
44+
45+
.controls {
46+
border-radius: 15px;
47+
padding: 24px;
48+
background: white;
49+
margin-top: 20px;
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
/* padding-top: 0px; */
54+
min-width: 320px;
55+
}
56+
57+
#startApplication {
58+
margin-top: 20px;
59+
}

0 commit comments

Comments
 (0)