Skip to content

Instantly share code, notes, and snippets.

Rafael Specht da Silva rssilva

Block or report user

Report or block rssilva

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View apply-and-plot-method.js
// 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)
View delay-no-direct-affecting-image.js
// 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)
View loading-image-canvas2.js
// 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
View simple-filter-function-pt.js
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
View playing-array-pt.js
// 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
View loading-image-canvas-pt.js
// 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
View play-signal-pt.js
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
View simple-filter-function.js
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
View playing-array.js
// 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
View play-signal.js
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
You can’t perform that action at this time.