Skip to content

Commit

Permalink
noice
Browse files Browse the repository at this point in the history
  • Loading branch information
@TexicoNotMexico
TexicoNotMexico committed Mar 24, 2023
1 parent 36a6508 commit e85bee7
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 47 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<body>
<h1>Oscillo</h1>

<input type="file" id="fileselector" accept=".wav">
<input type="file" id="fileselector" accept=".wav, .mp3">
<br/>
<button data-playing="false" role="switch" aria-checked="false">Play/Pause</button>
<br />
Expand All @@ -18,10 +18,10 @@ <h1>Oscillo</h1>
</label>
<br />
<label>Intensity
<input type="range" id="intensity" min="0" max="1" value="0.6" step="0.01">
<input type="range" id="intensity" min="0" max="1" value="0.2" step="0.01">
</label>
<label>Blur
<input type="range" id="blur" min="0" max="1" value="0.2" step="0.01">
<input type="range" id="blur" min="0" max="1" value="0.5" step="0.01">
</label>
<br />

Expand Down
118 changes: 74 additions & 44 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

// nodes
let audioElement = document.querySelector('audio');
let audioElement = document.querySelector("audio");

let track = audioContext.createMediaElementSource(audioElement);

Expand All @@ -16,8 +16,18 @@ let analyserR = audioContext.createAnalyser();
let channelSplitter = audioContext.createChannelSplitter(2);
let channelMerger = audioContext.createChannelMerger(2);

//let oscillatorL = audioContext.createOscillator();
//let oscillatorR = audioContext.createOscillator();

track.connect(gainNode).connect(channelSplitter);
/*oscillatorL.type = "sine";
oscillatorL.frequency.setValueAtTime(440, audioContext.currentTime);
oscillatorR.type = "sine";
oscillatorR.frequency.setValueAtTime(660, audioContext.currentTime);*/

//oscillatorL.connect(analyserL, 0).connect(channelMerger, 0, 0);
//oscillatorR.connect(analyserR, 0).connect(channelMerger, 0, 1);
channelSplitter.connect(analyserL, 0).connect(channelMerger, 0, 0);
channelSplitter.connect(analyserR, 1).connect(channelMerger, 0, 1);

Expand All @@ -26,75 +36,80 @@ channelMerger.connect(audioContext.destination);
// ------ controls ------ //

// file selector
const fileSelector = document.querySelector('#fileselector');
const fileSelector = document.querySelector("#fileselector");

fileSelector.addEventListener("change", function(e) {

fileSelector.addEventListener('change', function(e) {
let srcInput = e.target;
if (srcInput.files.length == 0) {
if (srcInput.files.length === 0) {
return;
}

if (playButton.dataset.playing === 'true') {
if (playButton.dataset.playing === "true") {
audioElement.pause();
playButton.dataset.playing = 'false';
playButton.dataset.playing = "false";
}

let srcFile = srcInput.files[0];
let reader = new FileReader();
reader.onload = () => {
audioElement.setAttribute("src", reader.result);
console.log(reader.result);
}
reader.readAsDataURL(srcFile);

}, false);

// play button
const playButton = document.querySelector('button');
const playButton = document.querySelector("button");

playButton.addEventListener('click', function() {
playButton.addEventListener("click", function() {

if (audioContext.state === 'suspended') {
if (audioContext.state === "suspended") {
audioContext.resume();
}

if (this.dataset.playing === 'false') {
if (this.dataset.playing === "false") {
audioElement.play();
this.dataset.playing = 'true';
} else if (this.dataset.playing === 'true') {
//oscillatorL.start();
//oscillatorR.start();
this.dataset.playing = "true";
} else if (this.dataset.playing === "true") {
audioElement.pause();
this.dataset.playing = 'false';
//oscillatorL.stop();
//oscillatorR.stop();
this.dataset.playing = "false";
}

}, false);

audioElement.addEventListener('ended', () => {
playButton.dataset.playing = 'false';
audioElement.addEventListener("ended", () => {
playButton.dataset.playing = "false";
}, false);

// volume control
const volumeControl = document.querySelector('#volume');
const volumeControl = document.querySelector("#volume");

volumeControl.addEventListener('input', function() {
volumeControl.addEventListener("input", function() {
gainNode.gain.value = this.value;
}, false);

volumeControl.addEventListener('dblclick', function() {
volumeControl.addEventListener("dblclick", function() {
this.value = 1;
gainNode.gain.value = this.value;
}, false);

// intensity control
const intensityControl = document.querySelector('#intensity');
const intensityControl = document.querySelector("#intensity");

intensityControl.addEventListener('dblclick', function() {
this.value = 0.6;
intensityControl.addEventListener("dblclick", function() {
this.value = 0.2;
}, false);

// blur control
const blurControl = document.querySelector('#blur');
const blurControl = document.querySelector("#blur");

blurControl.addEventListener('dblclick', function() {
this.value = 0.2;
blurControl.addEventListener("dblclick", function() {
this.value = 0.5;
}, false);

// ------ oscilloscope ------ //
Expand All @@ -107,39 +122,54 @@ analyserR.fftSize = 2048;
let bufferLengthR = analyserR.frequencyBinCount;
let dataArrayR = new Uint8Array(bufferLengthR);

const waveformCanvas = document.querySelector('canvas');
const canvasCtx = waveformCanvas.getContext('2d');
const waveformCanvas = document.querySelector("canvas");
const canvasCtx = waveformCanvas.getContext("2d");

canvasCtx.fillStyle = 'rgba(0, 0, 0, 1)';
canvasCtx.fillStyle = "rgba(0, 0, 0, 1)";
canvasCtx.fillRect(0, 0, 500, 500);

var j = 0;

function oscilloDraw() {

const drawVisual = requestAnimationFrame(oscilloDraw);
analyserL.getByteTimeDomainData(dataArrayL);
analyserR.getByteTimeDomainData(dataArrayR);

canvasCtx.fillStyle = `rgba(0, 0, 0, ${blurControl.value})`;
canvasCtx.fillStyle = `rgba(0, 0, 0, ${1 - blurControl.value})`;
canvasCtx.fillRect(0, 0, 500, 500);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = `rgba(0, 255, 0, ${intensityControl.value})`;
canvasCtx.beginPath();
for(let i = 0; i < bufferLengthL; i++) {

let v = dataArrayL[i] / 128.0;
let w = dataArrayR[i] / 128.0;
let y = 500 - w * 500/2;
let x = v * 500/2;

if(i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);

for(var i = 0; i < bufferLengthL; i++) {

canvasCtx.beginPath();

if(j === 0) {
x = 500 / 2;
y = 500 / 2;
}

var beforeX = x;
var beforeY = y;

var v = dataArrayL[i] / 128.0;
var w = dataArrayR[i] / 128.0;
var y = 500 - w * 500 / 2;
var x = v * 500 / 2;

var strokeAlpha = 1 - Math.round( Math.sqrt( Math.pow( x-beforeX, 2 ) + Math.pow( y-beforeY, 2 ) ) / Math.sqrt( 500000 ) * 100 ) / 100;

canvasCtx.strokeStyle = `rgba(0, 255, 0, ${strokeAlpha * intensityControl.value})`;

canvasCtx.moveTo(beforeX, beforeY);
canvasCtx.lineTo(x, y);

canvasCtx.stroke();

}
canvasCtx.stroke();

};
j++;

};

oscilloDraw();

0 comments on commit e85bee7

Please sign in to comment.