dy / wavearea

Multiline audio player / editor
https://dy.github.io/wavearea
26 stars 2 forks source link

a working example would be very helpful #4

Closed mreinstein closed 3 years ago

mreinstein commented 7 years ago

The demo looks awesome! But the code snippets in the README.md and in test.js don't actually work. Could you include a very simple working example? That would be quite helpful.

mreinstein commented 7 years ago

my current stab at an example (does not work for some reason)


'use strict'

const autosize    = require('autosize')
const Through      = require('audio-through')
const Wavearea     = require('wavearea')
const WaveRecorder = require('wave-recorder')

const CHANNEL_COUNT = 1
const SAMPLE_RATE = 44100

function getUserMedia(callback, error)
{
  try {
    navigator.getUserMedia = 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;
    navigator.getUserMedia({ audio: true, video: false }, callback, error)
  } catch (e) {
    alert('getUserMedia threw exception :' + e)
  }
}

// stream microphone input into wavearea
function gotStream(stream)
{   
  var audioContext = new AudioContext()
  var audioInput = audioContext.createMediaStreamSource(stream)

  // create the recorder instance 
  var recorder = WaveRecorder(audioContext, {
    channels: CHANNEL_COUNT,
    bitDepth: 16
  })

  const isMobile = false
  const op = {
    log: true,
    minDecibels: -40,
    fontRatio: isMobile ? 1.05 : 1,
    rows: isMobile ? 4 : 7
  }
  audioInput.connect(recorder.input, op)

  let inputEl = document.body.appendChild(document.createElement('textarea'))
  autosize(inputEl)
  let wavearea = Wavearea(inputEl)

  const opts = {
    // act as a generator readable stream if connected outwards but not connected inwards
    generator: true,

    // act as a sink writable stream if not connected outwards but connected inwards
    sink: true,

    // pcm options, in case if connected to raw output stream
    sampleRate: SAMPLE_RATE,
    channels: CHANNEL_COUNT,
    samplesPerFrame: 1024
  }
  recorder.pipe(Through(function(buf, done) {
    wavearea.push(buf)
    return buf
  }, opts)).pipe(drawer)

}

getUserMedia(gotStream, function(err) {
  console.error("There was an error accessing audio input. Please check.")
})
dy commented 7 years ago

@mreinstein thanks for the poking, I will give it another take. I was going to fix that after some other stuff, like gl-waveform.

dy commented 3 years ago

PoC example: https://audio-lab.github.io/wavearea/waveedit.html You can trim/save audio slices.