I'm trying to implement audio recording in a website. Basically the user should be able to press a button and speak something into the microphone. The recorded audio should then be sent to the server for further processing. I realise that you can do this with Flash, but for now I'm trying to avoid that.
I found several resources on the internet about it (i.e. link) but as it seems, this functionality is not widly supported yet. I experienced differences betweet the used browser and between the used operating system. For instance, the Chrome Browser doesn't seem to access any microphone on Linux correctly. So i was wondering if anyone knows a good resource to dive into this. Or maybe someone tried to set up something like this himself, and can help with some suggestions about where the limitations of HTML5 and the JavaScript Web Audio API are right now.
Thanks!
As of Chrome Version 27.0.1453.56 beta Mac, audio recording works with this demo application https://github.com/mattdiamond/Recorderjs
This app returns back a WAV file for the user which can be uploaded to the server.
If you want a truly robust solution that works on most desktop web browsers, you may need to resort to Flash.
This article covers up pretty well the current state of audio video capture possibilites using HTML5:
http://hdfvr.com/html5-video-recording
Also for just audio capture, here's a gitHub project that records audio to mp3 directly from the browser:
https://github.com/nusofthq/Recordmp3js
Related
Goal
To build a feature to make videos available offline. A feature like youtube offline videos but on browser.
Problem
Is it possible to make HLS formatted (also known as .m3u8) videos available to user offline on there browsers?
Is it possible to store HLS video in users browser (in Indexed db etc) and then play directly from there (At least for a short term period)?
I have crawled web and searched for a solution but found nothing and now I am putting my problem before the amazing SOF community. Please help or guide me.
I am looking for a way to detect whether a sound is being played in the current tab of Chrome. I would like to emphasize that the context is a web app and not a chrome extension nor a single audio element. My assumption is that the browser "knows" that the tab is playing sound by displaying an audible icon in the tab header, so I am guessing that there is some kind of browser HTML5 API for that.
Simple answer: no
Long answer:
Some-what-ish would be the best case in this context.
Chrome has a dev-only API for it's browser that hooks on audio devices connected, but it's not possible to use this in a real environment. (source)
The chrome.audio API is provided to allow users to get information
about and control the audio devices attached to the system. This API
is currently only implemented for ChromeOS.
There is also an interesting solution answered by Jared Sohn, the principle is that a plugin (should be web possible as well) scans the webpage for files playing audio. You could rewrite something like this for your webpage (by grabbing all possible sources for audio and checking them individually). (source)
Perhaps the closest that you can do is something similar to what the
MuteTab Chrome extension does (written by me,
http://www.github.com/jaredsohn/mutetab), which basically scans the
page for object, embed, audio, video, and applet tags and hides them
from the page. Unfortunately, this misses web audio
Question:
Is it possible, with some sort of technology, to integrate voice recording into a mobile web application?
Some background:
I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going.
Voice Recording Requirements:
1. Must work with both iOS and Android.
2. Must work in most current versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari.
3. Must work within the framework of a mobile web application.
4. Must be able to record without being actively connected to the internet.
5. The client application shouldn't require the user to alter their phone OS.
I tried to be as specific as possible to assist in allowing you to answer this question accurately. If anything is unclear, just let me know in a comment below, and I will further clarify.
Check this http://www.html5rocks.com/en/tutorials/getusermedia/intro/
HTML Media Capture <input type="file">
Work for most of the mobile browsers, but it works not well because it will require native recording app and needs to active manually.
getUserMedia() and WebRTC
So far, only the Chromium support it well in mobile.
So, I gave up the web app. Hybrid app is the solution.
If you want to try the hybrid app for recording, you can check the Cordova Plugin https://github.com/emj365/cordova-plugin-audio-recorder-api that I created for recording task in the hybrid app.
It looks like in the years since asking this question a solution has surfaced. This solution has come in the form of MediaStreamConstraints dictionary audio property.
The Web API docs from Mozilla have a very nice example shown below:
document.getElementById("startButton").addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
audio: true
}).then(stream => audioElement.srcObject = stream)
.catch(err => log(err.name + ": " + err.message));
}, false);
Resources
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
If you want to record it as an audio, I think you can only make it for Chrome dev, Chrome canary, Opera next, and some mobile browser.
Using the WebRTC getUserMedia() API then make the blob URL of the audio data URL to save it.
If you want to record it as text maybe you can use <input -x-webkit-speech/> for webkit browsers. Make an event that make every-time it stop recording it'll add the currently recorded speech to an element and start recording again. Finally, make a blob URL to save it as a text file.
I'm building a simulator that runs in the browser and needs to be deployed to the iPad. I've run into an issue where I need to be able to play a .wav file on a button click.
I know that the ipad supports the HTML5 audio tag, but this application will run on PC's, Mac's and the iPad and all browsers do not support the HTML5 audio tag yet. So I really need a solution that will work on the ipad, as well as the desktop.
Thanks in advance for any help with this issue.
I know it's not best practice to play audio in web pages, but it's what the client ordered, and he's the one paying the bills.
The JavaScript would be:
var audio = new Audio("noise.mp3");
audio.play();
I've heard, however, that iOS devices (iPad, iPhone, iPod) disable autoplay and the JavaScript .play() method at start up and will only play a noise in response to a explicit user action.
Google "HTML5 audio" to find out more details (and there are lots of detail.)
<object type="audio/mpeg" data="muzak.mp3">Your browser doesn't seem to like MP3s</object>
that should fire up whatever plugin's registered for mpeg audio, or display the alternate text.
You're better off embedding an mp3, because support for that is very widespread. A .wav, by comparison, can be anything. Wav is a container format and can use any number of different codecs, most of which are probably NOT supported by your average pc/browser.
I'm on a new project that requires to stream audio files (mp3) and record voice messages.. of course my first option was to use flash. But the problem is that the customer wants the website to be iPhone friendly.
Is there any technologie that allows me to play and record voice messages just with javascript/php/xhtml?
And of course, the website should be fully compatible with firefox, safari, internet explorer, etc.
I googled it and everything I found was flash-based.
but if you have any clue about it, please let me know.
No. Not even the new-ish HTML5 has any features to record audio. You'd need to go through Flash or Java - but that would rule out iPhone.
if you want to record sound you should do it with the new HTML5's api's, you can read more about it on
https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
However, this is theory, in reality no browsers support it and there is no way to do it. So in short: you cannot do what you ask.
What you could do is create an iPhone native app for those who want to use iPhone, and a flash website for those who want to access it with a regular browser.