Comment enregistrer de l'audio sur une page Web (iOS, Android, PC / Mac) - pas de flash
Je dois autoriser un utilisateur à enregistrer un fichier audio à l'aide de son microphone, mais il doit fonctionner sans flash car il doit fonctionner sur iOS (safari mobile), Android ou Chrome, et un navigateur moderne sur PC/Mac.
Existe-t-il une méthode HTML5 simple et propre pour enregistrer de l'audio et publier sur un serveur? Je n'ai rien trouvé.
Vous pouvez utiliser HTML5 API WebAudio .
Une introduction à la capture audio et vidéo Capture audio et vidéo en HTML5
Une bonne bibliothèque pour enregistrer de l'audio avec des échantillons Recorder.js
Un exemple complet et fonctionnel utilisant Recorder.js Comment enregistrer de l'audio dans Chrome avec les API HTML5 natives
Autres démos d'API WebAudio Démos et bibliothèques d'API Web Web HTML5
Navigateurs pris en charge Puis-je utiliser l'API Web Audio?
En ce qui concerne l'envoi des données à un autre serveur, en utilisant Recorder.js, vous pouvez obtenir le tampon audio, vous pouvez alors utiliser XMLHttpRequest pour POST le arraybuffer ou blob vers le serveur de destination directement ou encodé en base64.
MDN: Envoi et réception de données binaires
Html5Rocks: Nouvelle astuce dans XMLHttpRequest2, envoi de données
Professionnellement, je dirais que non, il existe des API audio pour HTML5 mais leur mise en œuvre varie pour le moment en fonction des navigateurs. Si vous faites cela pour une sorte de démonstration technologique, cela peut suffire, mais sinon, vous devrez peut-être recourir à d'autres technologies telles que les applications flash et/ou natives pour des résultats plus fiables.
getUserMedia() est désormais largement pris en charge sur mobile:
- Safari sur iOS 11 ( sauf UIWebView )
- Chrome sur Android
et bureau:
- Safari 11
- Chrome
- Firefox
- Bord 12
- Opera
Une fois l'autorisation de webcam/micro accordée et les données du micro activées, vous pouvez:
- encoder le son en utilisant des bibliothèques JS comme Recorder.js (wav), WebAudioRecorder.js (wav, mp3, Vorbis) ou vmsg (mp3) .
- ou utilisez le (natif) Media Recorder API pour capturer l'audio Opus dans les fichiers .ogg (Firefox) et .webm (Chrome) avec ce polyfill soigné pour Safari 11 et Edge qui produit des fichiers .wav.
Voici une démo que j'ai faite ( démo en direct , source sur GitHub ) qui utilise Recorder.js de Matt Diamond pour enregistrer de l'audio (pcm dans des fichiers .wav ) exécuté dans Safari sur iOS 11. Cliquer sur Enregistrer invite l'utilisateur à autoriser l'accès au microphone:
