rssilva

// 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)

rssilva

// 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)

rssilva

// 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

rssilva

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

rssilva

// 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

rssilva

// 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

rssilva

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

rssilva

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

rssilva

// 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

rssilva

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