Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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
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);
File renamed without changes.
Lines changed: 14 additions & 0 deletions
Loading[フレーム]
File renamed without changes.
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-
letfaster=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)

AltStyle によって変換されたページ (->オリジナル) /