Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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
// Vamos estabelecer o intervalo de duração (em seundos) que o som irá tocar
const duration = 1
// O incremento de tempo é o intervalo entre cada amostra
// então nós estamos determinando que cada sgundo terá 3000 valores
const increment = 1 / SAMPLE_RATE
// em todo clique do botão
button.addEventListener('click', () => {
let signal = []
let axis = []
// t será o tempo em segundos
for (let t = 0; t < duration - increment; t += increment) {
// talvez a 👮 do JS me prenda por isso, mas vamos usar eval para parsear a string
// da variável textArea e calcular a amplitude
const value = eval(textArea.value.trim())
// depois nós armazenamos a array com o sinal
signal.push(value)
axis.push(t)
}
// vamos chamar a função que criamos antes
playSignal(signal, audioContext, SAMPLE_RATE)
// e plotamos no canvas (eu criei essa função, mas é um wrapper simples do chart.js)
plot({
context,
axis: axis.slice(0, 100),
signals: [signal],
colors: ['orange'],
suggestedMin: -1,
suggestedMax: 1
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment