Howler Audio Adventure

{"name":"Audio Processing Demo","description":"","photo":"","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-02-05T20:04:15.656431Z","updated_at":"2025-02-05T20:04:15.656435Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":5755,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"let howls = [];\n\nlet audioSamples = [];\n\nlet audioContext = new (window.AudioContext || window.webkitAudioContext)();\n\nlet audioBuffers = [];\n\nlet currentSource = null;\n\nfunction preload() {\n // Load the default ChillSong sample with HTML5 support\n const defaultSample = new Howl({\n src: ['@asset(\"ChillSong\")'],\n //html5: true, // Enable HTML5 audio\n onplay: () => {\n console.log(\"Playing Sample 1\");\n }\n });\n howls.push(defaultSample);\n audioSamples.push(\"nostalgia.mp3\"); // Set default name\n}\n\n\nfunction setup() {\n noCanvas();\n document.getElementById('audioUpload').addEventListener('change', handleFileUpload);\n document.body.addEventListener('click', () => {\n if (audioContext.state === 'suspended') {\n audioContext.resume();\n }\n });\n}\n\nfunction uploadSample(index) {\n const fileInput = document.createElement('input');\n fileInput.type = 'file';\n fileInput.accept = 'audio/*';\n fileInput.onchange = (event) => handleFileUpload(event, index);\n fileInput.click(); // Automatically trigger the file selection dialog\n}\n\nfunction updateSampleName(index, name) {\n const sampleSlots = document.querySelectorAll('#audioControls div span');\n if (sampleSlots[index]) {\n sampleSlots[index].innerText = name; // Update displayed name\n }\n}\n\nfunction changeVolume(index, volume) {\n // Handle volume change if needed\n}\n\nfunction stopAudio() {\n if (currentSource) {\n currentSource.stop(); // Stop the current audio source\n currentSource = null; // Reset current source\n }\n}\n\nfunction pauseAudio() {\n if (currentSource) {\n // Pause functionality is not directly supported. Instead, we can stop and keep track of the current time.\n // This can be implemented if needed by storing the current time and playing from there later.\n currentSource.stop(); // Stop the audio\n currentSource = null; // Reset current source\n }\n}\n\nfunction changeSpeed(index, value) {\n const speed = 0.25 + (3.75 * value); // Map to 0.25 - 4.0\n playAudio(index, speed); // Play audio with new speed\n}\n\nfunction changePitch(index, value) {\n const pitch = parseFloat(value); // Get the pitch value from the slider\n playAudio(index, 1, pitch); // Play audio with the desired pitch\n}\n\nfunction handleFileUpload(event, index) {\n const files = event.target.files;\n if (files.length > 0) {\n const file = files[0];\n const reader = new FileReader();\n reader.onload = (e) => {\n audioContext.decodeAudioData(e.target.result, (buffer) => {\n audioBuffers[index] = buffer; // Store the decoded audio buffer\n updateSampleName(index, file.name); // Display the name\n }, (error) => {\n console.error(\"Error decoding audio data:\", error);\n });\n };\n reader.readAsArrayBuffer(file); // Read file as ArrayBuffer\n }\n}\n\nfunction togglePlayPause(index) {\n if (audioBuffers[index]) {\n playAudio(index); // Play the audio if it exists\n } else {\n console.warn(\"No audio buffer available for sample index:\", index);\n }\n}\n\nfunction playAudio(index, speed = 1) {\n if (audioBuffers[index]) {\n if (currentSource) {\n currentSource.stop(); // Stop the currently playing audio before playing a new one\n }\n currentSource = audioContext.createBufferSource(); // Create a new buffer source\n currentSource.buffer = audioBuffers[index]; // Set the buffer to the audio buffer\n currentSource.playbackRate.value = speed; // Set the playback speed\n currentSource.connect(audioContext.destination); // Connect to the audio output\n currentSource.start(0); // Start playback\n // Log when the audio ends\n currentSource.onended = () => {\n currentSource = null; // Reset when audio ends\n console.log(\"Audio ended\");\n };\n } else {\n console.error(\"Audio buffer not loaded for index:\", index);\n }\n}\n\n","style.css":"canvas {\n display: block;\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n}\n\n#audioControls {\n display: flex;\n flex-direction: column;\n gap: 20px;\n /* Space between each sample */\n}\n\n.sample1 {\n background-color: #4CAF50;\n}\n\n/* Green */\n.sample2 {\n background-color: #2196F3;\n}\n\n/* Blue */\n.sample3 {\n background-color: #FF5722;\n}\n\n/* Red */\n\nbutton {\n margin: 5px;\n /* Space around buttons */\n padding: 10px 20px;\n /* Button padding */\n border: none;\n /* Remove border */\n border-radius: 5px;\n /* Rounded button corners */\n cursor: pointer;\n /* Change cursor on hover */\n font-size: 16px;\n /* Button text size */\n}\n\nbutton:hover {\n opacity: 0.8;\n /* Slightly fade buttons on hover */\n}\n\n.stop-btn {\n width: 60px;\n /* Set width for stop button */\n height: 60px;\n /* Set height for stop button */\n font-size: 24px;\n /* Increase font size for visibility */\n}\n\n.sample-title {\n font-size: 18px;\n /* Title font size */\n font-weight: bold;\n /* Bold title */\n margin-right: 10px;\n /* Space between title and upload button */\n}\n\n.upload-btn {\n margin-left: 10px;\n /* Space between title and button */\n padding: 5px 10px;\n /* Padding for the button */\n}\n\n/* Adjust the button styles if needed */\n.button-group {\n display: flex;\n justify-content: flex-start;\n /* Align buttons to the left */\n margin-top: 15px;\n /* Space above button group */\n}\n\n.sample-header {\n display: flex;\n align-items: center;\n /* Center items vertically */\n width: 100%;\n /* Full width */\n margin-bottom: 10px;\n /* Space below the header */\n}\n\n.sample {\n height: 250px;\n /* Set the height for each sample zone */\n padding: 20px;\n border-radius: 10px;\n /* Rounded corners */\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* Align items to the start (left) */\n justify-content: flex-start;\n /* Align items to the top */\n color: white;\n /* Text color */\n}\n\n.button-group {\n display: flex;\n justify-content: flex-start;\n /* Align buttons to the left */\n margin-top: 10px;\n /* Space above button group */\n}\n\n.play-btn {\n width: 60px;\n /* Set width for play button */\n height: 60px;\n /* Set height for play button */\n font-size: 24px;\n /* Increase font size for visibility */\n margin-right: 10px;\n /* Space between play and stop button */\n}\n\nlabel,\ninput[type=\"range\"] {\n margin-top: 10px;\n /* Space above the volume controls */\n}","index.html":"\n\n\n\n \n \n Howler Audio Adventure\n \n \n \n\n\n\n

\n nostalgia.mp3\n \n

\n \n \n

\n Volume\n \n Speed\n \n Pitch\n \n

\n No Sample\n \n

\n \n \n

\n Volume\n \n Speed\n \n

\n No Sample\n \n

\n \n \n

\n Volume\n \n Speed\n \n

\n \n\n\n"},"chat_history":[],"assets":[{"name":"ChillSong","cloudinary_id":"ru8nij3kxnezt43edq2h","resource_type":"video","id":59150,"project_id":5755,"created_at":"2025-02-05T20:07:49.938150Z","deleted":false}],"messages_sent":36,"comments":[],"steps":[]}