[javascript] Audio capturen van een canvas element

[Arcane Apex]

Ik probeer met een Javascript-functie een audiocapture of audiorecording te beginnen die de audio-output van een canvaselement opslaat als .wav or .mp3 .

Dus zeg maar zo:

code:

startAudioCapture(); // Start recording

// Tussen deze twee functies speelt de canvasanimatie af met al zijn dynamisch gegeneerde geluiden.

stopAudioCapture(); // Stop recording

Het resultaat wil ik dan in een .wav of .mp3 opslaan en versturen naar de server.

Echter is me dit nog niet gelukt. De reden is dat ik vooralsnog geen Javascript functionaliteit of library heb kunnen vinden die audio kan capturen van een canvas element of website als geheel. Bijna alle functies en libraries die ik heb kunnen vinden die native Javascript zijn, zijn voor het recorden van microfoonaudio, maar daar heb ik in dit geval niet zoveel aan.

Ik zoek specifieke code die dit mogelijk maakt. Of een library. Dingen die ik al heb geprobeerd zijn RecordRTC en de MediaRecorder van Javascript, maar zoals gezegd, die bleken allemaal de streaming audio van een microfoon op te slaan in plaats van de audio die in het canvas-element werd afgespeeld.

Mocht dit client-side alleen op te lossen zijn met een andere technologie dan Javascript, dan sta ik daar ook voor open.

[RobIII]

Ik snap niet waarom je audio zou willen capturen als het canvas element de audio afspeelt kun je toch gewoon (ook) bij die audio?
Kun je, ook met het oog op je andere topic, eens gewoon vertellen wat je nou écht, concreet, aan het doen bent? Want ik krijg er vrij schimmige gevoelens bij. Ik denk dat je ook moet beseffen dat javascript in een browser (behoorlijk) sandboxed is; heel veel zaken zijn dus (met goede reden) niet mogelijk die buiten een browser om kinderspel zijn.

[ Voor 24% gewijzigd door RobIII op 12-04-2019 22:55 ]

[Arcane Apex]

RobIII schreef op vrijdag 12 april 2019 @ 22:52:
Ik snap niet waarom je audio zou willen capturen als het canvas element de audio afspeelt kun je toch gewoon (ook) bij die audio?
Kun je, ook met het oog op je andere topic, eens gewoon vertellen wat je nou écht, concreet, aan het doen bent? Want ik krijg er vrij schimmige gevoelens bij. Ik denk dat je ook moet beseffen dat javascript in een browser (behoorlijk) sandboxed is; heel veel zaken zijn dus (met goede reden) niet mogelijk die buiten een browser om kinderspel zijn.

Ik heb een canvas-animatie gemaakt met behulp van Javascript. In die animatie zitten ook dynamisch gegenereerde geluiden. Ik wil graag dat mensen de audio van die animatie als .mp3 of als .wav kunnen downloaden.

Het moeilijke hieraan is dat de geluiden dynamisch gegenereed worden. Elke animatie en de audio die daarbij hoort is anders en uniek. Vandaar dat ik deze functionaliteit nodig heb.

[Arcane Apex]

Ik heb inmiddels iets meer informatie gevonden. Ik deel deze informatie, zodat anderen hierover ook mee kunnen denken.

Het schijnt dat javascript de volgende functie heeft:

code:

navigator.mediaDevices.enumerateDevices()

Met die code kun je de input en output media-devices van je computer tonen. Wanneer je dus een audiostream captured, dan moet dat dus waarschijnlijk van een device komen die in deze lijst voorkomt. Nu heeft iedereen een andere hardwarecombinatie, maar de meeste chipsets op moederborden hebben vaak wel een gedeelte dat ook audio afhandelt.

Wat er dus waarschijnlijk dient te gebeuren is dat de stream van 1 van deze devices gecaptured moet worden. Dit kan de geluidskaart/chip zijn van het systeem of de audio die naar de speakers vloeit.

Javascript heeft tevens iets dat heet MediaRecorder. Deze neemt een stream als input. Dit kan bijvoorbeeld een audiostream zijn van een microfoon. Echter dient nu niet de audiostream van de microfoon gecaptured te worden, maar die van de geluidskaart/speakers.

Maar hoe doe je dat met Javascript?

[iH8]

Een HTML canvas element kan helemaal geen audio afspelen, dat is onmogelijk.

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

Maar geen audio dus. Native kunnen alleen HTMLMediaElements zoals <video> en <audio> audio afspelen. Voor die tijd zat je vast aan plugins zoals Flash en Silverlight. Ik zou mezelf eens verdiepen in de materie zodat je begrijpt wat er nu audio af aan het spelen is en dan je vraag even aanpassen of opnieuw stellen ofzo. Zo kan niemand je helpen.

[Arcane Apex]

iH8 schreef op zaterdag 13 april 2019 @ 11:20:
Een HTML canvas element kan helemaal geen audio afspelen, dat is onmogelijk.


[...]


Maar geen audio dus. Native kunnen alleen HTMLMediaElements zoals <video> en <audio> audio afspelen. Voor die tijd zat je vast aan plugins zoals Flash en Silverlight. Ik zou mezelf eens verdiepen in de materie zodat je begrijpt wat er nu audio af aan het spelen is en dan je vraag even aanpassen of opnieuw stellen ofzo. Zo kan niemand je helpen.

Ik zeg ook niet dat het canvas element audio afspeelt. In het canvas-element wordt audio alleen dynamisch afgespeeld met behulp van Javascript. Met de Javascript MediaRecorder kun je een media-stream zoals video of audio capturen vanuit een specifiek element zoals een canvas.

Dat is wat ik bedoel.

Dat is echter erg moeilijk voor elkaar te krijgen, omdat MediaRecorder standaard de stream captured van de microfoon van een systeem.

Het gaat ook niet om afspelen. Audio afspelen is een koud kunstje. Audio van een canvas element capturen die door de geluidskaart naar de speakers vloeit is complexer. Sommige systemen zoals servers hebben zelfs geen audiodevices. Daarvoor moet je een custom Linux kernel-module laden die een virtual dummy audio device simuleert middels een loopback en dan de audio-data capturen van die soundloop.

Heeft een systeem wel een audio device, dan moet je met Javascript (navigator.mediaDevices.enumerateDevices()) eerst het juiste device selecteren en vervolgens die stream naar de Javascript MediaRecorder sturen.

Het is best complexe materie.

[jerryhopper]

Je wil dus geluid opnemen, in een browser.

Kijk hier eens naar... : https://addpipe.com/simple-web-audio-recorder-demo/

En als je mp3 zou willen, is dit een goed startpunt : https://github.com/zhuker/lamejs


Het opgenomen geluid kan je opslaan in bijv. : localstorage, indexeddb, of je stuurt de audio naar een server, zodat je alle gebruikers op anderen ook de geluiden van de anderen kan laten horen.

[ Voor 32% gewijzigd door jerryhopper op 19-04-2019 11:01 ]

[Stoelpoot]

Een stukje omdenken: Je genereert dynamisch geluid, dit speel je af, en daarna wil je dit opnieuw opnemen zodta dit opnieuw afgespeeld kan worden.

Het lijkt mij dat een logischer aanpak is het gegenereerde geluid direct op te slaan zodat de gebruiker dit kan downloaden.