Web Audio API

2018/12/4

HTML5で、音を扱うための仕組み。

やりたいこと

オンライン版のPraatのようなものを作りたい。

ウェブ上でエディットする

スマホからアップロード

WebPDというのを見つけた。

cmsはwordpressに任せて、wavesurfer.jsで表示するのがいい感じか。波形は出せるのだが、、spectrogramを表示したい。

SoundCloudの有料版を契約してしまうのもいいかもしれない。

ただし、スペクトログラムを出せない。

wavesurfer.js https://wavesurfer-js.org/examples/

ここの例がなかなかいい。spectrogramがいいですね。

spectrogram - npm https://www.npmjs.com/package/spectrogram

miguelmota/spectrogram: IN NEED OF MAINTAINERS Audio spectrogram in canvas. https://github.com/miguelmota/spectrogram

HTML5 spectrogram on canvas with pitch estimation - 0110.be https://0110.be/posts/HTML5_spectrogram_on_canvas_with_pitch_estimation

HTML5 Spectrum Analyzer https://codepen.io/swys/pen/nxzpD

wavesurfer.js https://wavesurfer-js.org/

naomiaro/waveform-playlist: Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity. https://github.com/naomiaro/waveform-playlist

g200kg/webaudio-tinysynth: Light-weight GM mapped WebAudio-JavaScript Synthesizer Engine / MIDI Player https://github.com/g200kg/webaudio-tinysynth

turing complete fm では、時間を押すと、そこに飛ぶようになっている。31. 携帯電話のハッキング、コンピュータサイエンスの論文 (るくす) https://turingcomplete.fm/31

#audio #HTML5 #JavaScript #sound