In New Zealand being kid of human.
We might make mistakes but we will make other things too. -
Michael Joseph Savage
Published
Edited
Nov 3, 2021
02 play mp3 buffer
Frontend masters Web-Audio by Matt DesLauriershttps://github.com/mattdesl/workshop-web-audio
Replay only available as editing still happeninghttps://frontendmasters.com/workshops/web-audio/
function loadSound() {
// Re-use the same context if it exists
if (!audioContext) {
mutable audioContext = new AudioContext();
}
// Re-use the audio buffer as a source
if (!audioBuffer) {
mutable audioBuffer = audioContext.decodeAudioData(audioFile);
}
}
audioFile = FileAttachment("chime.mp3").arrayBuffer()
function playSound() {
// Ensure we are all loaded up
loadSound();
// Ensure we are in a resumed state
audioContext.resume();
// Now create a new "Buffer Source" node for playing AudioBuffers
const source = audioContext.createBufferSource();
// Connect to destination
source.connect(audioContext.destination);
// Assign the loaded buffer
source.buffer = audioBuffer;
// Start (zero = play immediately)
source.start(0);
}
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(width, width/2);
};
sketch.draw = function() {
sketch.background("#001b42");
sketch.fill("white");
sketch.noStroke();
// Draw play/pause button
const dim = sketch.min(width, height);
if (sketch.mouseIsPressed) {
sketch.circle(width / 2, height / 2, dim * 0.1);
} else {
polygon(width / 2, height / 2, dim * 0.1, 3);
}
}
sketch.mousePressed = function () { // play sound if any place on the screen
playSound();
}
// Draw a basic polygon, handles triangles, squares, pentagons, etc
function polygon(x, y, radius, sides = 3, angle = 0) {
sketch.beginShape();
for (let i = 0; i < sides; i++) {
const a = angle + sketch.TWO_PI * (i / sides);
let sx = x + sketch.cos(a) * radius;
let sy = y + sketch.sin(a) * radius;
sketch.vertex(sx, sy);
}
sketch.endShape(sketch.CLOSE);
}
})
mutable audioContext = null
mutable audioBuffer = null
height = width/2
import {p5} from "@tmcw/p5"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
