Giter Site home page Giter Site logo

audio-oscilloscope's Introduction

oscilloscope

npm downloads dependencies license

Waveform audio visualizer for the HTML5 canvas.

wave

install

Import the module and bundle it for the browser with your favorite module bundler,

$ npm install oscilloscope

or include it directly in your HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

example

var Oscilloscope = require('oscilloscope')

var audioContext = new window.AudioContext()

// create source from html5 audio element
var source = audioContext.createMediaElementSource(audioElement)

// attach oscilloscope
var scope = new Oscilloscope(source)

// start default animation loop
scope.animate(canvas.getContext("2d"))

See the examples folder for more details on how to customize the animation.

usage

scope = new Oscilloscope(source [, { fftSize: 2048 }])

Supply an AudioNode as source.

Optionally set the fftSize property of the internal AnalyzerNode. This can be used to adjust the smoothness or resolution of the animated oscilloscope.

For more control supply an AnalyzerNode as source.

scope.draw(context [, x, y, width, height])

Draw oscilloscope to a canvas context, and optionally set position and dimensions.

scope.animate(context [, x, y, width, height])

Start a basic animation loop that redraws the oscilloscope using the .draw() method.

scope.stop()

Stop the animation loop started by the .animate() method.

audio-oscilloscope's People

Contributors

dependabot[bot] avatar mathiasvr avatar swharden avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

nightwolfz st47ik zeroocool craigify arcin stephensong imcoding drmaxis jaekookang rotycenh webthreejs versionsixnine

audio-oscilloscope's Issues

Safari compatibility

Hy and thanks!

I am trying to make this work on Apple Safari with a html-audio-element as source. It works fine in Mozilla.

Apparently there is a compatibility problem with AudioContext that needs it’s prefixed version webkitAudioContext for Safari. I’m using a workaround that makes the errors go away in Safari.

But sadly the audio output stays mute and the waveform stands still.

Here what I am using:

<!DOCTYPE html>
<html>
<head>
  <title>Oscilloscope</title>
  <style>
    body {
      margin: 0;
      background-color: White;
      color: Black;
      text-align: center;
    }
    canvas {
      display: block;
    }

  </style>
</head>
<body>
  
  <audio preload="metadata" controls="controls" src="test.mp3"></audio>
  
  <script src="oscilloscope.umd.js"></script>
  <script src="audio-element.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      startExample();
    })
  </script>
</body>
</html>
function startExample () {

	context = new (window.AudioContext || window.webkitAudioContext)();
	var canvas = document.createElement('canvas')
	canvas.width = window.innerWidth
	canvas.height = window.innerHeight - 50
	document.body.appendChild(canvas)
	var audio = document.querySelector('audio')
	var source = context.createMediaElementSource(audio)

	// attach oscilloscope
	var scope = new Oscilloscope(source)

	// reconnect audio output to speakers
	source.connect(context.destination)

	// customize drawing options
	var ctx = canvas.getContext('2d')
	ctx.lineWidth = 2
	ctx.strokeStyle = '#4096b3'

	// start default animation loop
	scope.animate(ctx)
}

attaching createMediaElementSource mutes audio

Hi - I know the oscilloscope is designed to work with a createMediaStream source and not createMediaElement source, but I'm trying to get your library to work with audio files vs getUserMedia.

I actually had it working for a bit, but it may have actually been a bug in chrome that allowed things to play, that stopped working when chrome was updated.

At any rate. I am pulling audio files from an api, and playing them throw an html5 web audio node. I then want oscilloscope to visualize the waveform of that recording.

I can play the audio successfully, and, when I add:

var source = context.createMediaElementSource($audio) //MH TODO: sound gets cut here
scope.addSignal(source, options.color)

where $audio is the reference to the html5 audio node, the sound cuts out, but the waveform is visualized as if the audio is still playing. Once it finishes, it successfully moves to the next recording in the playlist, and visualizes that. If I comment out the above two lines, the audio plays fine again.

I'm wondering if there is something in the oscilloscope code that would mute the audio stream for some reason, or something I need to do to connect the source or scope to the audio node. I saw something about connecting streams in the documentation

Let me know if you have any ideas. I've temporarily solved this issue by cloning the audio node, so that I have one node for the actual audio, and one node for oscilloscope, and (hopefully), they mirror each other. But it feels sloppy.

You can see the source code here

What is `fftSize` useful for?

Hi there!

I am wondering what the fftSize parameter is used for. The README mentions that it is passed to the AnalyserNode, but what is that for? The visualization works completely in time domain, right? There is no frequency analysis required for the visualization as far as I can tell. Why is this AnalyserNode needed?

Thanks :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.