Git Product home page Git Product logo

addpipe / simple-recorderjs-demo Goto Github PK

View Code? Open in Web Editor NEW
402.0 14.0 228.0 22 KB

A simple HTML5/JS demo that uses Recorder.js to record audio as uncompressed pcm (wav) and POST it to a server side script.

Home Page: https://addpipe.com/blog/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/

HTML 7.96% JavaScript 83.16% CSS 6.70% PHP 2.17%
wav record-audio getusermedia audio-recorder javascript pcm

simple-recorderjs-demo's People

Contributors

octavn avatar remusnegrota avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

simple-recorderjs-demo's Issues

corrupted wav file

Thanks for your great effort.
I can upload the file but the file i receive is corrupted. if i download the file and try to play that:
Windows Media Player encountered a problem while playing the file.

With which sampleWidth is recorded?

I am trying to use this js with socket io and speech recognition and for speech recognition i have to know the sample width.

Thanks this is a great tool

Compression/filtering across multiple devices - sample rates not accurate?

I've tried recording with the demo (https://addpipe.com/simple-recorderjs-demo/) on several dozen different devices (smartphones, computers, tablets) and in a few different browsers. The recorded sample rate is 44.1 kHz or 48 kHz but upon inspecting the resulting wave files (by displaying spectrograms in Praat), the files are mostly all compressed (despite that the sample rates stated in the file info are 44.1 or 48 kHz), with everything above either 7.5-8 kHz (Android+some PCs) or 13 kHz (iOS) or 20-20.5 kHz (Macbooks) not recorded or filtered or something (blank/no noise) as if the sample rates were actually about 16 kHz, 26 kHz, and 40 kHz, respectively. Some of these devices I've tested making wave recordings in recorder apps and with these, they can record sample rates of 44.1 - 48 kHz without compression. Do other people have this issue with simple recorder.js? Does anyone know why this is happening or how to fix it? Having this compression/filtering or whatever it is defeats the benefits of an online .wav recorder.

Safari Pops at beginning and end

Hi - I am getting pops at the beginning and end of a new recording, even on the demo page. It follows through to download.

Anyone else get this?

I am on Safari Version 15.2 (15612.3.6.1.8, 15612).

Can I use the recorded file to send it as attachment to gmail?

My requirement is simple and straight forward. I want to record the message and send it as an attachment to gmail using PHPMailer. Is it possible and supported by this? Because I have been trying but I get an error on move_uploaded_file function of php. Immediate response would be highly appreciated. Thanks !!

The Live demo not working iOS 11.4.1

I tried the live demo today on four different browsers under iOS 11.4.1 : mobile Safari, Firefox, Chrome, and Puffin.

I do not get the dialog requesting mic permission. On some browsers the recording button responds. Stop and pause also respond to touch but nothing else happens.

I tested the live demo on an iPod touch 6G. It is a new device. Are there perhaps some settings or permissions I have missed?

Or is the live demo page outdated and the current source code would work? I just wanted to see the demo working before I invest any time with the code.

This is an excellent project. I have been waiting for this for several years. I hope it all works.

Cheers.

app.js:166 Uncaught ReferenceError

I am trying to use this code to host on ec2 on AWS. I have followed the same steps as mentioned in the blog. However I face the following issue:

recordButton clicked                                                                 app.js:45
getUserMedia() success, stream created, initializing Recorder.js ...                 app.js:73 
Recording started                                                                    app.js:98 
stopButton clicked                                                                   app.js:166
 Uncaught ReferenceError: recordingsList is not defined
    at createDownloadLink                                                            (app.js:166)
    at Worker.Recorder.worker.onmessage                                              (recorder.js:238)

I have no clue why this is occuring. The microphone access is enabled. But however nothing is being recorded.

Could you please let me know where, I am going wrong with this one?

Microphone Permission

Microphone requires permission on every request of recording. Can it be set once on page load and continue from there on?

License?

What license is this code released under? I would like to modify it for my own project, but I want to make sure you get appropriate credit.

Very low sound on IOS

Very nice work and easy to use. Everything is working fine except that the sound level is very low on mobile (Tested safari and chrome on IOS) but it's perfect on desktop (Chrome, FF, Safari). I get the same result trying the demo setup.

First i thought it was the recording, but after a lot of research I found that the recording it self is fine. The problem is when i play the recorded audio without refreshing the browser the sound is very low. If i refresh the browser the sound is perfect.

What is really weird is if i write an alert() in the stopRecording() function, the sound plays perfect even without refreshing the browser.

Testet in IOS - Safari, could this be a IOS bug?

function stopRecording() {
rec.stop();

gumStream.getTracks().forEach(function(track) {
    if (track.readyState == 'live' && track.kind === 'audio'){
        track.stop();
    }
});

alert('Recording is complete');

rec.exportWAV(handleRecording);
}

It's a bit like safari don't release or end the getUserMedia() and as long as that is 'on' the audio.play(); has low sound. Maybe the alert() changes browser focus and therefore it works(?)

I would really like to avoid having an alert there but don't know how this can be fixed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.