waveform-playlist
opus-recorder
Our great sponsors
waveform-playlist | opus-recorder | |
---|---|---|
2 | 2 | |
1,417 | 936 | |
- | - | |
0.0 | 0.0 | |
about 1 month ago | about 1 year ago | |
JavaScript | JavaScript | |
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
waveform-playlist
-
Audio Manipulation Library/API
-https://github.com/naomiaro/waveform-playlist -https://github.com/goldfire/howler.js
- Track and Master effects with Tone.js
opus-recorder
-
Push Notifications, WebXR, and better PWA support coming to iOS
In the end, I went with this library for now: https://github.com/chris-rudmin/opus-recorder
There are issues reported with the latest iOS, though.
-
Flask breaks webpage
// size of one wav in ms var PACKAGESIZE = 175; // offset proportion for delay from recders ( if .5 recoder2 starts at the midlle of recorder1) var OFFSETRATIO = 0.99; var BRIDGERATIO = 0.05; // audio streamer implementation using https://github.com/chris-rudmin/opus-recorder to record audio data and convert to real 16bit pcm mono wav file // sending wav to flask server using post via ajax blob post function screenLogger(text, data) { log.innerHTML += "\n" + text + " " + (data || ''); // console.log(text); } var recorder = new Recorder({ monitorGain: 0, recordingGain: 1, numberOfChannels: 1, wavBitDepth: 16, encoderPath: "../static/dist/waveWorker.min.js" }); // function startRecording(){recorder.start();console.log("started recording");} document.getElementById("startRecording").addEventListener("click", function(){recorder.start();console.log("start");}); //#region recorder1 recorder.onstart = function(){ screenLogger('Recorder is started'); setTimeout(function(){recorder.stop();},PACKAGESIZE); }; recorder.onstop = function(){ screenLogger('Recorder is stopped'); recorder.start(); }; recorder.onstreamerror = function(e){ screenLogger('Error encountered: ' + e.message ); }; recorder.ondataavailable = function( typedArray ){ console.log(recorder.encodedSamplePosition); console.log("data available"); var dataBlob = new Blob( [typedArray], { type: 'audio/wav' } ); var form = new FormData(); form.append('file', dataBlob, "fileName"); form.append('title', "fileName2"); $.ajax({ type: 'POST', url: 'http://127.0.0.1:5000/send', crossDomain: true, data: form, cache: false, processData: false, contentType: false }).done(function(data,status) { console.log(data,status); screenLogger("result:",data); }); var fileName = new Date().toISOString() + ".wav"; var url = URL.createObjectURL( dataBlob ); var audio = document.createElement('audio'); audio.controls = true; audio.src = url; var link = document.createElement('a'); link.href = url; link.download = fileName; link.innerHTML = link.download; var li = document.createElement('li'); li.appendChild(link); li.appendChild(audio); recordingslist.appendChild(li); }; //#endregion //#region recoder2 var recorder2 = new Recorder({ monitorGain: 0, recordingGain: 1, numberOfChannels: 1, wavBitDepth: 16, encoderPath: "../static/dist/waveWorker.min.js" }); recorder2.onstart = function(){ screenLogger('Recorder 2 is started'); setTimeout(function(){recorder2.stop();},PACKAGESIZE*BRIDGERATIO); }; recorder2.onstop = function(){ screenLogger('Recorder 2 is stopped'); recorder2.start(); }; recorder2.onstreamerror = function(e){ screenLogger('Error encountered: ' + e.message ); }; recorder2.ondataavailable = function( typedArray ){ console.log("data available 2 "); var dataBlob = new Blob( [typedArray], { type: 'audio/wav' } ); var form = new FormData(); form.append('file', dataBlob, "fileName"); form.append('title', "fileName2"); $.ajax({ type: 'POST', url: 'http://127.0.0.1:5000/send', crossDomain: true, data: form, cache: false, processData: false, contentType: false }).done(function(data,status) { console.log(data,status); screenLogger("result:",data); }); var fileName = new Date().toISOString() + ".wav"; var url = URL.createObjectURL( dataBlob ); var audio = document.createElement('audio'); audio.controls = true; audio.src = url; var link = document.createElement('a'); link.href = url; link.download = fileName; link.innerHTML = link.download; var li = document.createElement('li'); li.appendChild(link); li.appendChild(audio); recordingslist.appendChild(li); }; //#endregion
What are some alternatives?
wavesurfer.js - Audio waveform player
BootstrapBlazor - A set of enterprise-class UI components based on Bootstrap and Blazor
howler.js - Javascript audio library for the modern web.
noisecraft - Browser-based visual programming language and platform for sound synthesis.
vue-audio-visual - VueJS audio visualization components
react-xr - 🤳 VR/AR with react-three-fiber
RecordRTC - RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
outreachy - Repo to receive contributions from Outreachy applicants
react-music-player - [Stop the maintenance] :musical_note: Maybe the best beautiful HTML5 responsive player component for react :)
opustags - Ogg Opus tags editor
astrofox - Astrofox is a motion graphics program that lets you turn audio into amazing videos.
Olaf - Olaf: Overly Lightweight Acoustic Fingerprinting is a portable acoustic fingerprinting system.