Skip to content

Instantly share code, notes, and snippets.

View rssilva's full-sized avatar

Rafael Specht da Silva rssilva

View GitHub Profile
// This UGLY code will apply the effect on each color
applyAndPlot (splitted) {
// parseToAudio will convert image values from the range 0 - 255 to the range -1 - 1
const parsedRed = this.canvasUtils.parseToAudio(splitted.red)
// createSource method will create a bufferSource node so we can
// write the array values to the buffer and handle as a song wave
let sourceRed = this.createSource(parsedRed)
// Let's instance an AudioContext
const audioContext = new AudioContext()
// Get the canvas context from a canvas that is on the html file
const canvasContext = document.querySelector('#canvas').getContext('2d')
// Here are two utils classes that I created to handle canvas and audio operations...
// the 'modules' object is just to avoid things globally but is not related with any
// module implementation on JS, just a regular object {}
const canvasUtils = new modules.CanvasUtils()
const audioUtils = new modules.AudioUtils(audioContext)
// doing a query to get the element on html file
const canvas = document.querySelector('#canvas')
// getting the canvas context
const context = canvas.getContext('2d')
// Let's create an Image instance
const baseImage = new Image()
// 'low.jpg' is the image path on your file system
const getSourceNode = (audioContext, buffer) => {
// vamos criar um buffer vazio
const source = audioContext.createBufferSource()
// depois atribuir o buffer passado como argumento ao buffer do nó fonte
source.buffer = buffer
// essa propriedade faz o buffer ser executado em looping
source.looping = true
return source
// Vamos adicionar um canvas para ver o gráfico, uma textare para escrever equações
// e um boto para começar a tocar
const context = document.querySelector('#canvas').getContext('2d')
const textArea = document.querySelector('#function-area')
const button = document.querySelector('#play-button')
const audioContext = new AudioContext()
const SAMPLE_RATE = 3000
// fazendo uma query do elemento presente no arquivo html
const canvas = document.querySelector('#canvas')
// obtendo o contexto de canvas
const context = canvas.getContext('2d')
// Vamos criar uma instância de Imagem
const baseImage = new Image()
// 'lena.jpg' é o caminho da imagem no nosso sistema de arquivos
const playSignal = (signal = [], audioContext, sampleRate) => {
const signalLength = signal.length
// Este nó será usado como fonte para tocar o sinal
const node = audioContext.createBufferSource()
// Vamos criar o buffer que será atribuído para o nó acima
// Os argumentos são: número de canais, o comprimento do buffer, que
// é o mesmo do sinal e taxa de amostragem
// Taxa de amostrage é basicamente quantas amostras o array de som contém por segundo
const getSourceNode = (audioContext, buffer) => {
// let's create an empty buffer
const source = audioContext.createBufferSource()
// then we assign the passed buffer to node's buffer
source.buffer = buffer
// this is will play the buffer in looping
source.looping = true
return source
// Let's add a canvas to see the graphs, a textarea to write the equation
// and a button to start playing
const context = document.querySelector('#canvas').getContext('2d')
const textArea = document.querySelector('#function-area')
const button = document.querySelector('#play-button')
const audioContext = new AudioContext()
const SAMPLE_RATE = 3000
const playSignal = (signal = [], audioContext, sampleRate) => {
const signalLength = signal.length
// This node will be used as the source to play the signal
const node = audioContext.createBufferSource()
// Let's create the buffer to be assigned to the above node
// The arguments are: the number of channels, the length of the buffer, which
// is the same from the signal and the sample rate
// Sample Rate is basically how many samples the sound array contains per second