Git Product home page Git Product logo

googlechromelabs / web-audio-samples Goto Github PK

View Code? Open in Web Editor NEW
683.0 31.0 196.0 685.05 MB

Web Audio API samples by Chrome Web Audio Team

Home Page: https://bit.ly/web-audio-samples

License: Apache License 2.0

HTML 11.49% CSS 0.88% JavaScript 80.58% C++ 3.88% Makefile 0.10% GLSL 0.18% ShaderLab 0.19% C 0.63% Nunjucks 1.89% TypeScript 0.20%
webaudioapi chrome audioworklet audio webmidiapi

web-audio-samples's Introduction

Web Audio Samples by Chrome Web Audio Team

This branch contains the source codes of the Web Audio Samples site. See the actual site built from the source, see gh-pages branch.

Development

Branch structure

  • main: site source
  • gh-pages: the actual site built from main
  • archive: old projects/examples (V2 and earlier)

How to make changes and depoly

  1. Clone the repository.
  2. npm install
  3. To fire up the local dev server, npm run start.
  4. Make sure to run npm run format to apply linting/formatting.
  5. To deploy, npm run deploy

Support

If you have found an error in this library, please file an issue at: https://github.com/GoogleChromeLabs/web-audio-samples/issues.

Contribution

Patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub. See CONTRIBUTING.md for more detail.

License

Copyright 2018 Google, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

web-audio-samples's People

Contributors

daksh-10 avatar divyamahuja avatar dp-goog avatar grazder avatar gsinafirooz avatar hoch avatar kizjkre avatar kk-kd avatar mjwilson-google avatar professorabhay avatar sisi-sh avatar sxyazi avatar tenghuizhang avatar terryzfeng 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 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

web-audio-samples's Issues

Demos that don't work with unprefixed webaudio

webkitAudioContext still used

Looks like most demos still use webkitAudioContext. We need to update these. I thought we had fixed all of them to use AudioContext when available. Newer versions of chrome now print out deprecation messages about using webkitAudioContext.

Remove dj-test.html

dj-test.html is very similar to dj.html. A quick diff shows that the major differences are in how the cross fader works, the addition of a post compressor gain stage in dj.html, and some difference in how the animation is drawn.

Replace some console.log messages with alert?

Some of the demos use console.log to print out error messages, like being unable to decode a file. I think some of these should probably be converted to alerts to make it more conspicuous on why a demo isn't working.

Fix timeline.html

Just need to change webkitAudioContext to OfflineAudioContext. Probably want to keep this because this is probably what was used to generate the timeline graph example in the WebAudio spec.

Remove oscillator-fm.html

Seems to be roughly similar to oscillator-fm2.html, so we should just remove this one in favor oscillator-fm2.html.

Slider labels don't include value until the slider is moved

Using the DJ demo as an example, notice that when loaded the slider label doesn't include any info about the value of the slider. When you move the slider, then the label is updated to include the value.

I find it somewhat annoying that the slider doesn't automatically include the initial value. I didn't investigate if this is an issue with slider itself or with the various demos that show the slider value.

Fix or remove simple-mixing.html

It's a simple demo to mix three sounds together with differing gain. Probably not worth having. I think html5rocks has similar demos already.

mag-phase uses 2-arg createBuffer and recyles source.buffer

The 2-arg createBuffer prevents FF from working.
Also, it recycles the source.buffer. One AudioBufferSourceNode is created, and as the user selects different sounds, source.buffer is set to the new sound. We'll probably want to change that.

Fix javascript-processing2.html or delete

Could be an interesting demo, but maybe we should just delete this since it's using Javascript to do amplitude modulation. Probably not a good idea to have even more demos of processing in Javascript.

Fix or remove test-waveshaper.html

A couple of tweaks makes this run, but I don't know what it's really supposed to show and what the correct audio is.

Perhaps best to remove this?

Remove tone.html

This just generates a 440 Hz tone using a buffer. If anything we'd use an Oscillator these days.

Just remove this.

WebGL and Web Audio don't work together in FF?

Following demos don't work, but oddly, when you flip to another screen (e.g. press the back button), the audio suddenly starts.

Affects at least:
oscillator.html
oscillator-fm.html
javascript-processing.html
visualizer-gl.html

Demos not working with Firefox

Here is a list of demos that don't work with Firefox. I did not investigate why, just whether there was the expected output. Tests were done using Firefox 27.0.1 on Linux. I did not compare the audio with Chrome.

  • convolution: The Spoken word and Obama examples constantly spin; no audio output. Others seem to work ok, but I didn't try every one.
  • wavetable-synth Audio sounds really funny.
  • Digital DJ Just keeps spinning.
  • Granular Effects Just keeps splnning. Console says "Error decoding human voice!"
  • Realtime Analyser Console says "Error decoding human voice!".
  • Oscillator. No audio or graphics.
  • FM Synthesis. No audio or graphics.
  • Panning/Reverb. Audio output, but moving the red dot around doesn't produce audio like I expect.
  • Javascript Processing. No audio, but visuals work. Oddly, when I press the back button, audio suddenly starts playing. How bizarre is that!?!

WaveTableSynth not working

This used to work, especially after Chris made some fixes.

But today, I hear nothing with Chrome M36.

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.