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

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