Javascript Girl
  1. Javascript Girl
  3. Est-il possible de mélanger plusieurs fichiers audio les uns aux autres de préférence avec javascript
Intereting Posts
Regex pour trouver s'il n'y a qu'un seul bloc de code OrientDB Aucune instance de base de données trouvée dans l'erreur contextuelle? Trouvez Sum of 2d Array en version javascript en rangs et en colonne Inverser le défilement GetElementById () renvoie null même si l'élément existe Comment trouver la position du curseur dans une DIV contournable? Comment nettoyer une région en forme de polygone dans un élément de voile? Javascript équivalent à l'appel_user_func () de PHP Erreur de proxy de compression de données Chrome avec jquery ajax Comment Google Analytics collecte ses données? Get Browser Tab Index / Id Changement de couleur de fond du corps avec angularjs Comment débloquer un événement dédié à la navigation dans un navigateur Chrome (en essayant de déboguer le projet phonegap) JavaScript: Différents comportements lors de l'utilisation de la notation par points par rapport à la notation de la parenthèse JavaScript: document.getElementById performance lente?

Est-il possible de mélanger plusieurs fichiers audio les uns aux autres de préférence avec javascript

Je souhaite combiner des clips audio, superposés les uns aux autres afin qu'ils jouent en synchronisme et soient enregistrés dans un nouveau fichier audio. Toute aide serait très appréciée. J'ai fait un certain creusement en ligne, mais je n'ai pas trouvé une réponse définitive quant à savoir si plusieurs des outils disponibles dans la mesure où les bibliothèques d'édition audio Javascript vont (Mix.js, par exemple) sont capables.

Oui, il est possible d'utiliser OfflineAudioContext() ou AudioContext.createChannelMerger() et de créer un MediaStream . Voir Phonegap en mélangeant des fichiers audio , Web Audio API .

Vous pouvez utiliser fetch() ou XMLHttpRequest() pour récupérer la ressource audio en tant que ArrayBuffer , AudioContext.decodeAudioData() pour créer un AudioBufferSourceNode depuis la réponse; OfflineAudioContext() pour AudioContext audio fusionné, AudioContext , AudioContext.createBufferSource() , AudioContext.createMediaStreamDestination() , MediaRecorder() pour enregistrer le flux; Promise.all() , Promise() constructor, .then() pour traiter les requêtes asynchrones pour fetch() , AudioContext.decodeAudioData() , transmettre le flux audio mixte résultant à l'événement stop de MediaRecorder .

Connectez chaque AudioContext AudioBufferSourceNode à OfflineAudioContext.destination , appelez .start() sur chaque nœud; Appeler OfflineAudioContext.startRendering() ; Créer un nouveau noeud AudioContext , connecter AudioContext ; Appelez .createMediaStreamDestination() sur AudioContext pour créer un MediaStream partir de tampons audio fusionnés, passer .stream à MediaRecorder() , lors de l'événement stop de MediaRecorder , créer Blob URL de Blob de mixage audio enregistré avec URL.createObjectURL() , qui peut être téléchargé En utilisant l'élément <a> avec l'attribut de download et href défini sur l' Blob URL . 

 var sources = ["https://upload.wikimedia.org/wikipedia/commons/b/be/" + "Hidden_Tribe_-_Didgeridoo_1_Live.ogg" , "https://upload.wikimedia.org/wikipedia/commons/6/6e/" + "Micronesia_National_Anthem.ogg"]; var description = "HiddenTribeAnthem"; var context; var recorder; var div = document.querySelector("div"); var duration = 60000; var chunks = []; var audio = new AudioContext(); var mixedAudio = audio.createMediaStreamDestination(); var player = new Audio(); player.controls = "controls"; function get(src) { return fetch(src) .then(function(response) { return response.arrayBuffer() }) } function stopMix(duration, ...media) { setTimeout(function(media) { media.forEach(function(node) { node.stop() }) }, duration, media) } Promise.all(sources.map(get)).then(function(data) { var len = Math.max.apply(Math, data.map(function(buffer) { return buffer.byteLength })); context = new OfflineAudioContext(2, len, 44100); return Promise.all(data.map(function(buffer) { return audio.decodeAudioData(buffer) .then(function(bufferSource) { var source = context.createBufferSource(); source.buffer = bufferSource; source.connect(context.destination); return source.start() }) })) .then(function() { return context.startRendering() }) .then(function(renderedBuffer) { return new Promise(function(resolve) { var mix = audio.createBufferSource(); mix.buffer = renderedBuffer; mix.connect(audio.destination); mix.connect(mixedAudio); recorder = new MediaRecorder(mixedAudio.stream); recorder.start(0); mix.start(0); div.innerHTML = "playing and recording tracks.."; // stop playback and recorder in 60 seconds stopMix(duration, mix, recorder) recorder.ondataavailable = function(event) { chunks.push(event.data); }; recorder.onstop = function(event) { var blob = new Blob(chunks, { "type": "audio/ogg; codecs=opus" }); console.log("recording complete"); resolve(blob) }; }) }) .then(function(blob) { console.log(blob); div.innerHTML = "mixed audio tracks ready for download.."; var audioDownload = URL.createObjectURL(blob); var a = document.createElement("a"); a.download = description + "." + blob.type.replace(/.+\/|;.+/g, ""); a.href = audioDownload; a.innerHTML = a.download; document.body.appendChild(a); a.insertAdjacentHTML("afterend", "<br>"); player.src = audioDownload; document.body.appendChild(player); }) }) .catch(function(e) { console.log(e) }); 
 <!DOCTYPE html> <html> <head> </head> <body> <div>loading audio tracks.. please wait</div> </body> </html>