Web-Frontend
js-Tutorial
Wie teilen Sie einen aufgezeichneten Blob -Stream mit JavaScript in mehrere 5 -Sekunden -WAV -Dateien auf und stellen Sie sicher, dass er normal abgespielt wird?
Wie teilen Sie einen aufgezeichneten Blob -Stream mit JavaScript in mehrere 5 -Sekunden -WAV -Dateien auf und stellen Sie sicher, dass er normal abgespielt wird?
Apr 04, 2025 pm 02:39 PM
Verwenden Sie JavaScript, um den aufgezeichneten Blob-Stream zu teilen und eine 5-Sekunden-WAV-Datei zu generieren
Bei der Aufzeichnung mit React-MIC habe ich auf eine Anforderung gesto?en: Ich muss den aufgezeichneten Blob-Stream in mehrere 5-Sekunden-WAV-Dateien aufteilen. Nach dem Versuch stellte ich jedoch fest, dass nur die erste geteilte WAV -Datei normal abgespielt werden kann und der Rest der Dateien aufgefordert wird, besch?digt zu werden.
Bei der Implementierung dieser Anforderung im Front-End stehen wir haupts?chlich vor zwei Herausforderungen: Eine ist, wie man den Blob-Stream korrekt segmentiert, und der andere ist, wie jeder segmentierte Clip WAV-Dateien korrekt generieren und abspielen kann. Im Folgenden finden Sie Code -Beispiele und -L?sungen:
React, {Useref, Usestate} aus 'React' '
Import {reactmic, reactmicStopevent} aus 'React-mic' '
{button} aus 'AntD' importieren
const audioreCorder = () => {
const [record, setRecord] = usustate (false)
const resref = useref <blob> ([])
const audiochunksref = useref <blob> ([])
const intervalref = useref <nodejs.timer null> (NULL)
const firstblob = useref <blob undefiniert> (undefiniert)
const createwavHeader = (numchannels, sampled, bytelength) => {
const header = new ArrayBuffer (44);
const view = new Dataview (Header);
View.SetUint32 (0, 1380533830, False); // "Riff"
View.SetUint32 (4, Bytelength 36, False);
View.SetUint32 (8, 1718449184, Falsch); // "WELLE"
view.setuint32 (12, 1684108385, falsch); // "fmt"
View.SetUint32 (16, 16, wahr); // 16 für PCM
view.setUint16 (20, 1, true); // PCM
view.setUint16 (22, numchannels, true);
View.SetUint32 (24, Probenplan, wahr);
View.SetUint32 (28, Sampled * Numchannels * 2, True);
view.setUint16 (32, numchannels * 2, true);
view.setUint16 (34, 16, true); // 16 Bit
View.SetUint32 (36, 1684108385, False); // "Daten"
View.SetUint32 (40, Bytelength, True);
Return Header;
};
const SaveFile = async () => {
const chunkList = Resref.Current;
für (lass i = 0; i <chunkslist.length i const audiobuffer="new" uint8array auf chunklist .arraybuffer header="createwavHeader" audiobuffer.length angenommen mono und wavblob="neuer" blob url="url.createObjecturl" a="document.createelement" a.reif="url;" a.download="`Aufzeichnung" .wav a.click url.revokeobjecturl startercording="()"> {
setRecord (true)
audiochunksref.current = [] // Die vorherigen Aufzeichnungsdaten l?schen // Teilen Sie das Aufzeichnungsintervalref.current = setInterval (() => {
const curblob = neuer Blob (AudiochunksRef.Current, {Typ: 'Audio/Wav'})
const startIndex = audiochunksref.current.indexof (firstblob.current als Blob)
const blob = curblob.slice (startIndex === -1? 0: startIndex, -1, 'audio/wav')
firstblob.current = audiochunksref.current.at (-1)
// Verarbeiten Sie die aktuelle Aufzeichnungsdatenkonsole.log ('Segment der aktuellen Aufzeichnungsdaten:', Blob)
resref.current.push (Blob)
}, 5000)
}
const stoprecording = () => {
setRecord (falsch)
Intervalref.Current && ClearInterval (Intervalref.Current) // Timer Clear}}
const ondata = (recordedBlob: blob) => {
audiochunksref.current.push (recordblob) // Aufzeichnungsdaten} speichern}
const onStop = (recordedBlob: reactmicStopEvent) => {
console.log ('aufgezeichnet abgeschlossen:', Recordblob)
}
const SaveFile1 = () => {
Const ChunksList = Resref.Current
ChunksList.map (Async (v, i) => {
const Dateiname = 'aaa.wav' '
const Datei: Datei = neue Datei ([v], Dateiname, {type: 'audio/wav'})
const FileSize = Datei.Size
console.log ('fileside', filesize)
// Erstellen Sie einen Download -Link const url = url.createObjecturl (Datei)
const a = document.createelement ('a')
a.reif = url
A.Download = `Aufzeichnung $ {i} .wav` // Legen Sie den Namen der Download -Datei ein.
})
}
const SaveFinalResult = () => {
const Dateiname = 'aaa.wav' '
const -Datei: Datei = neue Datei (AudiochunksRef.Current, Dateiname, {Typ: 'Audio/Wav'})
const FileSize = Datei.Size
console.log ('fileside', filesize)
// Erstellen Sie einen Download -Link const url = url.createObjecturl (Datei)
const a = document.createelement ('a')
a.reif = url
A.Download = `Aufzeichnung $ {date.now ()}. WAV` // Setzen Sie den Namen der Download -Datei A.click () // Trigger Download // URL -Ressourcen -URL.revokeObjecturl (URL) ver?ffentlichen.
}
Zurückkehren (
<div>
<reactmic record="{record}" onstop="{onStop}" ondata="{ondata}" mimetype="audio /wav"></reactmic>
<button onclick="{startercording}"> starten Sie die Aufzeichnung </button>
<button onclick="{stoprecording}"> Aufnahme von Aufnahme </button>
<button onclick="{SaveFile}"> Download </button>
<button onclick="{SaveFinalResult}"> Finale </button> herunterladen
</div>
)
}
Standard -Audiorecorder exportieren</chunkslist.length></blob></nodejs.timer></blob></blob>
W?hrend des Versuchs, den Blob -Stream zu teilen und die WAV -Datei zu generieren, wurde festgestellt, dass das manuelle Hinzufügen der WAV -Header -Informationen das Problem nicht l?sen würde. Der Grund dafür ist, dass die Struktur der WAV -Datei relativ streng ist. Wenn die Header -Informationen nach der Segmentierung nicht korrekt hinzugefügt werden, kann die Datei besch?digt werden.
Ein Vorschlag zur L?sung dieses Problems ist die Verwendung der WASM -Version von FFMPEG, einer Bibliothek mit Audio- und Videoverarbeitung, die im Browser ausgeführt werden kann. Damit k?nnen Sie das Audio problemlos segmentieren und das richtige WAV -Dateiformat erstellen. Sie k?nnen in Betracht ziehen, das Projekt FFMPEG. GWASM zu verwenden, um diese Funktion zu implementieren.
Das obige ist der detaillierte Inhalt vonWie teilen Sie einen aufgezeichneten Blob -Stream mit JavaScript in mehrere 5 -Sekunden -WAV -Dateien auf und stellen Sie sicher, dass er normal abgespielt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
Der Mittelfluss der Kette ist freigelegt: Auf welche neuen Token werden von cleverem Geld gewetten?
Jul 16, 2025 am 10:15 AM
Gew?hnliche Investoren k?nnen potenzielle Token entdecken, indem sie "intelligentes Geld" verfolgen, bei denen es sich um hochkar?tige Adressen handelt, und die Aufmerksamkeit auf ihre Trends liefern kann, kann Leitindikatoren liefern. 1. Verwenden Sie Tools wie Nansen und Arkham Intelligence, um die Daten in der Kette zu analysieren, um den Kauf und die Best?nde von intelligentem Geld anzuzeigen. 2. Verwenden Sie Dune Analytics, um das von der Gemeinschaft geschaffene Dashboards zu erhalten, um den Mittelfluss zu überwachen. 3. Folgen Sie Plattformen wie Lookonchain, um Echtzeit-Intelligenz zu erhalten. In jüngster Zeit plant Canging Money, LRT-Track, Depin-Projekt, modulares ?kosystem und RWA-Protokoll neu zu polieren. Beispielsweise hat ein bestimmtes LRT -Protokoll eine gro?e Menge an frühen Einlagen erhalten, ein bestimmtes Depinprojekt wurde kontinuierlich akkumuliert, eine bestimmte ?ffentliche Kette wurde vom Finanzministerium der Branche unterstützt, und ein bestimmtes RWA -Protokoll hat Institutionen zum Eintritt angezogen.
Wer ist für Stablecoin DAI_ Analyse der dezentralen Stablecoin -Nutzungsszenarien geeignet
Jul 15, 2025 pm 11:27 PM
DAI ist für Benutzer geeignet, die dem Konzept der Dezentralisierung Bedeutung beibringen, aktiv am Defi-?kosystem beteiligt sind, die Liquidit?t der Verm?genswerte für die Verm?genswerte ben?tigen und die Transparenz und Autonomie der Verm?genswerte verfolgen. 1. Unterstützer des Dezentralisierungskonzepts Trust intelligente Vertr?ge und Community Governance; 2. Defi -Benutzer k?nnen zum Abbau von Krediten, Versprechen und Liquidit?t verwendet werden. 3.. Cross-Chain-Benutzer k?nnen eine flexible übertragung von Mehrketten-Verm?genswerten erreichen. 4. Governance -Teilnehmer k?nnen Systementscheidungen durch Abstimmung beeinflussen. Zu den Hauptszenarien geh?ren eine dezentrale Kreditvergabe, die Absicherung von Verm?genswerten, Liquidit?tsabbau, grenzüberschreitende Zahlungen und Community Governance. Gleichzeitig ist es notwendig, auf Systemrisiken, Hypothekenschwankungen und technische Schwellenprobleme zu achten.
Wie identifiziere ich gef?lschte Altcoins? Lehre dich, Kryptow?hrungsbetrug zu vermeiden
Jul 15, 2025 pm 10:36 PM
Um gef?lschte Altcoins zu identifizieren, müssen Sie von sechs Aspekten ausgehen. 1. überprüfen und überprüfen Sie den Hintergrund der Materialien und des Projekts, einschlie?lich wei?er Papiere, offizieller Websites, Code Open Source -Adressen und Teamtransparenz; 2. Beobachten Sie die Online -Plattform und geben Sie dem Mainstream -Austausch Priorit?t. 3.. Achten Sie vor hohen Renditen und Personenverpackungsmodi, um Fondsfallen zu vermeiden. 4. Analysieren Sie den Vertragscode und den Token -Mechanismus, um zu überprüfen, ob es b?swillige Funktionen gibt. 5. überprüfen Sie Community- und Medienoperationen, um falsche Popularit?t zu identifizieren. 6. Befolgen Sie die praktischen Vorschl?ge gegen das Strand, z. B. nicht an Empfehlungen zu glauben oder professionelle Geldb?rsen zu verwenden. Die obigen Schritte k?nnen Betrugsbetrug effektiv vermeiden und die Sicherheit der Verm?genswerte schützen.
Bitcoin, Chainlink und RWA Resonance Rise: Der Krypto -Markt tritt in die institutionelle Logik ein?
Jul 16, 2025 am 10:03 AM
Der koordinierte Aufstieg von Bitcoin, Chainlink und RWA markiert die Verschiebung zur institutionellen narrativen Dominanz auf dem Kryptomarkt. Bitcoin bietet als von Institutionen zugewiesene Makro -Absicherung eine stabile Grundlage für den Markt. Chainlink ist zu einer Schlüsselbrücke geworden, die die Realit?t und die digitale Welt durch Oracle und Cross-Chain-Technologie verbindet. RWA bietet einen Compliance -Pfad für den traditionellen Kapitaleintrag. Die drei bauten gemeinsam eine vollst?ndige logische geschlossene Schleife des institutionellen Eintritts: 1) BTC zuordnen, um die Bilanz zu stabilisieren; 2) das Verm?gensverwaltungsmanagement durch RWA erweitern; 3) Verlassen Sie sich auf ChainLink, um die zugrunde liegende Infrastruktur aufzubauen, was darauf hinweist, dass der Markt in eine neue Bühne eingetreten ist, die von der realen Nachfrage angetrieben wird.
Was ist besser, Dai oder USDC?
Jul 15, 2025 pm 11:18 PM
Ist DAI für eine langfristige Beteiligung geeignet? Die Antwort h?ngt von den individuellen Bedürfnissen und Risikopr?ferenzen ab. 1. DAI ist ein dezentrales Stablecoin, das durch überm??ige Sicherheiten für Krypto -Verm?genswerte erzeugt wird und für Benutzer geeignet ist, die den Widerstand und die Transparenz des Zensurwesens verfolgen. 2. Seine Stabilit?t ist gegenüber USDC etwas unterlegen und kann aufgrund von Kollateralschwankungen leichter Deandsaler aufweisen. 3.. Anwendbar für Kredite, Versprechen und Governance -Szenarien im Defi -?kosystem; V. Wenn Sie hohe Stabilit?ts- und Compliance -Garantien verfolgen, wird empfohlen, USDC zu w?hlen. Wenn Sie dem Konzept der Dezentralisierung Bedeutung beibringen und aktiv an Defi-Anwendungen beteiligt sind, hat DAI einen langfristigen Wert. Die Kombination der beiden kann auch die Sicherheit und Flexibilit?t der Verm?genszuweisung verbessern.
Die Rolle von Ethereum intelligenten Vertr?gen
Jul 15, 2025 pm 09:18 PM
Die Rolle des Smart -Vertrags von Ethereum besteht darin, eine dezentrale, automatisierte und transparente Protokollausführung zu realisieren. Zu den Kernfunktionen geh?ren: 1. Als Kernlogikschicht von DAPP unterstützt es Token -Emission, Defi, NFT und andere Funktionen; 2. Ausführen von Vertr?gen automatisch über Code, um die Risiken menschlicher Interventionen und Betrugs zu verringern; 3. Erstellen Sie ein Defi -?kosystem, damit Benutzer Finanzgesch?fte wie Kreditvergabe und Transaktionen direkt durchführen k?nnen. 4. Erstellen und Verwalten digitaler Verm?genswerte, um die Einzigartigkeit und überprüfbarkeit zu gew?hrleisten; 5. Verbesserung der Transparenz und Sicherheit der Lieferkette und der Identit?tsprüfung; 6. DAO-Governance unterstützen und dezentrale Entscheidungen erkennen.
Wie viel kostet ein Stablecoin -USD
Jul 15, 2025 pm 09:57 PM
Der Wert von Stablecoins wird normalerweise in den US -Dollar 1: 1 festgelegt, wird jedoch aufgrund von Faktoren wie Marktangebot und Nachfrage, Vertrauen der Anleger und Reservenverm?gen geringfügig schwanken. Zum Beispiel fiel der USDT 2018 auf 0,87 USD, und USDC fiel im Jahr 2023 aufgrund der Silicon Valley Banking -Krise auf rund 0,87 USD. Der Verankerungsmechanismus von Stablecoins umfasst haupts?chlich: 1. Fiat -W?hrungsreserve -Typ (wie USDT, USDC), das auf den Reserven des Emittenten beruht; 2. Hypothekentyp der Kryptow?hrung (wie DAI), die die Stabilit?t durch überkollateralisierung anderer Kryptow?hrungen beibeh?lt; 3.. Zu den Empfehlungen der gemeinsamen Handelsplattformen geh?ren: 1. Binance, die reichhaltige Handelsprodukte und eine starke Liquidit?t bereitstellen; 2. OKX,
Die jüngste Marktprognose für Altcoins_ Welche W?hrungen haben Explosionspotential?
Jul 15, 2025 pm 11:03 PM
Welche Altcoins haben im Jahr 2025 explosives Potenzial? Die Antworten lauten wie folgt: 1. In der Layer2-Expansionsspur hat sich Arbitrum (ARB) rasant erweitert, wobei offensichtliche t?gliche aktive Benutzer und Optimismus (OP) als Ethereum-Optimierungsprotokoll weiterhin von gro? angelegten Protokollen übernommen werden, die es wert sind, Aufmerksamkeit zu schenken. 2. Unter den Defi -Protokoll -Altcoins hat AAVE (AAVE) aufgrund der neuen Version eine stabile Kapitalzuflüsse angezogen, und Curve (CRV) h?lt eine vorteilhafte Position in der Stablecoin -Austauschspur und hat eine starke Wettbewerbsf?higkeit. 3.. In der Kombination künstlicher Intelligenzprojekte erh?ht Fetch.ai (FET) die Aufmerksamkeit durch Integration von KI und Blockchain sowie Ocean Pro
