Ce que je veux en fin de compte, c'est enregistrer à partir du microphone de l'utilisateur et télécharger le fichier sur le serveur quand ils ont terminé. Jusqu'à présent, j'ai réussi à créer un flux vers un élément avec le code suivant:
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}
Comment puis-je passer de cela à l'enregistrement dans un fichier?
javascript
html
html5-audio
audio-recording
Fibreicon
la source
la source
Réponses:
Une démo d'enregistrement assez complète est disponible sur: http://webaudiodemos.appspot.com/AudioRecorder/index.html
Il vous permet d'enregistrer de l'audio dans le navigateur, puis vous donne la possibilité d'exporter et de télécharger ce que vous avez enregistré.
Vous pouvez afficher la source de cette page pour trouver des liens vers le javascript, mais pour résumer, il existe un
Recorder
objet qui contient uneexportWAV
méthode et uneforceDownload
méthode.la source
Le code ci-dessous est la propriété de Matt Diamond et peut être utilisé sous licence MIT. Les fichiers originaux sont ici:
Enregistrez ces fichiers et utilisez
la source
Mise à jour maintenant Chrome prend également en charge MediaRecorder API de v47. La même chose à faire serait de l'utiliser (en supposant que la méthode d'enregistrement native est forcément plus rapide que les contournements), l'API est vraiment facile à utiliser et vous trouverez des tonnes de réponses sur la façon de télécharger un objet blob pour le serveur. .
Démo - fonctionnerait dans Chrome et Firefox, volontairement laissé de côté en poussant le blob vers le serveur ...
Source du code
Actuellement, il existe trois façons de procéder:wav
[tout le code client, enregistrement non compressé], vous pouvez vérifier -> Recorderjs . Problème: la taille du fichier est assez grande, plus de bande passante de téléchargement est requise.mp3
[tout le code client, enregistrement compressé], vous pouvez vérifier -> mp3Recorder . Problème: personnellement, je trouve la qualité mauvaise, il y a aussi ce problème de licence.comme
ogg
[node.js
code client + serveur ( ), enregistrement compressé, heures infinies d'enregistrement sans plantage du navigateur], vous pouvez vérifier -> recordOpus , soit uniquement l'enregistrement côté client, soit le regroupement client-serveur, le choix vous appartient.Exemple d'enregistrement ogg (uniquement Firefox):
Démo Fiddle pour l'enregistrement ogg.la source
Il s'agit d'un simple enregistreur et éditeur de sons JavaScript. Tu peux l'essayer.
https://www.danieldemmel.me/JSSoundRecorder/
Peut télécharger à partir d'ici
https://github.com/daaain/JSSoundRecorder
la source
Voici un projet gitHub qui fait exactement cela.
Il enregistre l'audio du navigateur au format mp3 et l'enregistre automatiquement sur le serveur Web. https://github.com/Audior/Recordmp3js
Vous pouvez également consulter une explication détaillée de l'implémentation: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
la source
Vous pouvez utiliser Recordmp3js de GitHub pour répondre à vos besoins. Vous pouvez enregistrer à partir du microphone de l'utilisateur, puis obtenir le fichier au format mp3. Enfin, téléchargez-le sur votre serveur.
J'ai utilisé ceci dans ma démo. Il existe déjà un exemple disponible avec le code source par l'auteur à cet emplacement: https://github.com/Audior/Recordmp3js
La démo est ici: http://audior.ec/recordmp3js/
Mais ne fonctionne actuellement que sur Chrome et Firefox.
Semble bien fonctionner et assez simple. J'espère que cela t'aides.
la source
getUserMedia()
ne fonctionne que sur les origines sécurisées (https, localhost) depuis Chrome 47Diffusez de l'audio en temps réel sans attendre la fin de l'enregistrement: https://github.com/noamtcohen/AudioStreamer
Cela diffuse des données PCM mais vous pouvez modifier le code pour diffuser des mp3 ou Speex
la source