mdn / web-dictaphone

A sample MDN app that uses getUserMedia and MediaRecorder API for recording audio snippets, and The Web Audio API for visualizations.

Web dictaphone

NOTE: This repository is archived and has been moved into the MDN Web Docs dom-examples repository under the media/web-dictaphone folder.

web-dictaphone's Issues

Stop button should be disabled while not recording

... as there's nothing to stop

Error using Iphone (iOS)

Hi everyone, thank you very much for creating this great app.

I have no issues using it in Chrome or Firefox when they are in Android or Windows, but in iPhone, recordings give an Error, in both Chrome and Safari.

So it seems as if it's a problem related to iOS instead of a browser problem.

I wonder if you know about it and if by chance you know how to solve it.

Thank you very much,

Best,

Carlos

File duration?

Downloaded audio file does not have duration. Any solutions for this example?

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please see Mozilla-GitHub-Standards or email [email protected].

(Message COC001)

Ask for microphone permission when record button is pressed

It would be nice to delay the 'use microphone' permissions dialog box the browser displays until the user presses the record button as opposed to the permissions dialog box opening on page load. The former might scare the user.

not recording long audios in Firefox

recordking ok in chrome, but in Firefox 87 it doesn't record audios longer than 6 - 7 seconds, the time changes sometimes audios are shorter. When recording it doesn't show any error. But once it finishes the audio is cut.

The audio controls are not working as expected just after stop recordig

Once a user records the audio the progress bar is showing abnormal behaviour when it plays for first time while for second time onwards it's working as expected ..

How to download the sound clip?

I noticed that the following code in index.html has been commented. How do I download the recorded sound clips? Thanks.

  <article class="clip">
    <audio controls></audio>
    <a href="">Download clip</a>
  </article>

latency issue

Hello, I want to record multiple tracks based on the tracks before. For example: In the first track I recorded a beatbox, and when recording the second track, the first track plays in the headphones and I record the lyrics in sync with it. When playing it both at the same time, I notice that the second track begins a few milliseconds later. Can this problem be fixed?

Heres the Code: https://www.regerapps.de/recorder/

Self-XSS when naming clip with HTML/JavaScript content

Most likely due to https://github.com/mdn/web-dictaphone/blob/gh-pages/scripts/app.js#L66.

I suggest using textContent or createTextNode instead.

How to get Recording File in mp3 or Wav format

Hi,

We want to get a recording in mp3 or .wav format.How can I achieve it?

Regards,
Gaurav

Variables declaration without var keyword

In the app.js file on lines 135, 136 :

WIDTH = canvas.width
HEIGHT = canvas.height;

There are variables declaration without var keyword in uppercase.
Is it on purpose ?

Tks ~
Germain

How to save recorded voice in host as a file?

disable microphone permission after stop record?

Hello, how to disable microphone permission after stop record?
With AudioContext getAudioTracks removes permission, but with mediaRecorder.stop doesn’t make the trick.
Any idea?

Doesn't work in Windows 8.1 Chrome or Android 4.4.2 Chrome 42.0.2311.111

Ability to close the stream once record stops

• Add some code demostrating closing the mediaDevices, MediaStream when MediaRecorder stops.
• Get the Blob withf the default mime encoding of the MediaRecorder using , MediaRecorder.requestData() . instead of having to manually get blob from chunks, to ensure compact data intergrity.

If you press 'Cancel' on the dialog to set clip name after recording clip, it... saves the clip anyway?

This behaviour is confusing.

Perhaps it should pre-fill the answer and let you edit it if you wanted to.

preload does not work with recorded audio, duration is NaN until full played first time

When we record a sound from the microphone, the recorded audio clip has not defined its .duration property, also tried with preload="metadata" or preload="auto" without success...
It seems that the recorded file has something wrong inside the file binary data that prevents the audio player, or the container to read its duration property...

How to reproduce:
Record an audio snippet from the microphone. Check that the player has not defined the "duration" for the file. audio.duration = NaN

Tried with diferent audio formats, like audio/ogg, audio/wav, audio/mpeg and audio/mp3
Play the file one time. Now you can check the duration is defined.
Is the problem in the stream, the blob or the chunks?

Link to online version

It would be nice if the project description included a URL to the hosted online version at https://mdn.github.io/web-dictaphone/

How to upload this audio to aws?

Hello @chrisdavidmills Thank you for great project. This is my question, Can you help me ,please? thank you so much.

Voice is not recorded

I am trying to record voice using earphone or headphone but it is not working. Also it is working only on Firefox browser.

Recording is working if any music playing in the system.