Pt. 1 –

Inspelning och Sparande av Audio – Pt. 1

Medan du arbetar på ett program, jag hade en bra bit av problem med att hitta bra resurser för att hantera ljud med denna stack. Inspelning av ljud har en anständig mängd av resurser, men resurserna för att spara ljud var mycket gles. Jag hoppas att denna lilla serien hjälper någon att bryta igenom de murar!

I detta 2 kompanjon, vi kommer att gå igenom den serie av händelser från att göra ett ljud klump i fronten, för att lagra det i S3, då alla de sätt för att göra det tillbaka ut i någon annan del av din app.

lite vi ska täcka i detta första inlägg är att ställa in inspelningen komponent i att Reagera och att sprida info tillbaka.

Inspelning

Ställa in de funktioner

jag rekommenderar att du använder MediaRecorder API för att hantera spela in ljud — Det är mycket lättillgänglig, lätt att manipulera, och i tillämpliga fall. Se till att kolla in den och exempel för mer information. Eftersom vi är i en komponent, vi vill att hantera saker och ting på ett lite annorlunda sätt från Vanilj JS i-dokument. Här är mitt förslag till lösning för att skapa inspelning inspelning/funktioner:

Ovan: jag har sparat en del variabler i att jag vill ha tillgång till. Sedan i prepareRecording(), vi får tillstånd från användaren för att använda ljud – /initiering av mediaRecorder exempel som vi kommer att använda för att fånga media. startRecording() går vidare och börjar streaming media och när data finns (i händelse av att fartyg med API), vi kommer att fortsätta att trycka upp dem till en array så att vi kan sammanställa den större medial händelse.

Ovan: stopRecording() – stannar i media ström och gör några hantering för oss att kunna ge omedelbar feedback till användaren med sin nya inspelningen. Vi sparar den nya fläcken och url till våra tillstånd för senare användning. emergencyStop() är för tillfället där användaren oväntat avslutas processen, och vi vill vara säker på att alla processer stoppas.

Rendering

Nu för rendering, så kommer dessa metoder att använda som en modal och villkorligt göra bitar för att underlätta för användaren – förändringar i statliga ovan kommer att meddela villkorligt rendering. Glöm inte att koppla in några semantiska användargränssnitt för snabb och vacker byggnad.

När modal är öppnade, vi ringer för att förbereda inspelningen. Vid denna punkt, det är en uppmaning att starta inspelningen. Klicka kommer att utlösa vår starta inspelningen metod, att händelsen dataavailable är att fånga ljudet. På skärmen kommer att vara en knapp för att stoppa som, när du klickar på den, kommer att generera vår blob, och en lokal url för blob-data. Med den lokala URL: en, kan du spela upp sin inspelning tillbaka till dem där med ljud html-tagg (med kontroll) och göra en spara-knappen.

Och det är inspelning! Om det är allt du letar efter, bra gjort! Om du är en av de sorgliga själar som vill ha kvar dessa data, vi har lite mer att gå här, men mest i del 2.

Skicka

Och det är där det blir lite knepigt.

  • Hur gör vi bunt vår nya uppgifter så att vår back-end kommer att få det?
  • När den tas emot, hur gör vi för att lagra data?

namn=6370>paketering av data, se sista biten av vår komponent nedan:

Vi att göra ett par saker här. Blob är bästa som skickas till den bakre utgången med vissa metadata — vad är det här fläcken? En riktigt ren sätt att skicka denna ‘blob plus-data' genom att skapa en FormData objektet eftersom det buntar upp vår data som nyckel-värde-par, och skickar det hela på ett sätt som våra backend smälter verkligen fint. Dessutom, jag är också för att skapa en fil från ljud-blob och skicka tillbaka det till skillnad blob själv. Detta är en personlig preferens. Du kan bara skicka blob om du vill.

Okej! Om du inte redan gjort det, gå vidare och sätta upp en S3 bucket (eller skapa ett konto om du inte ställa upp men är äventyrlig!). Så kolla in dokument för Aktiv Lagring, som kommer att hjälpa oss att ansluta till AWS S3. Tänk på detta en fungerande paus. Ser du i del 2 — vi kommer att gå över konfiguration för S3 och Aktiv Lagring det lite, då vi ska räkna ut hur att ringa på som-data.

We will be happy to hear your thoughts

Leave a reply