Voice recording on the website and download to disk - javascript

Is it possible to somehow set a constant parameter of 22010Hz? I want to make a website with a page on which you can record a sound message on a local disk in mp3 format 22010Hz.
Demo: https://www.webrtc-experiment.com/RecordRTC/simple-demos/audio-recording.html
Sample: https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/audio-recording.html
i tried to change the parameter in RecordRTC.js(https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC.js)
in lines 2944-4946 and nothing changes.

Related

Is it possible to cut part of video and upload it on server only with html5 & js

I use Filereader to read local video file (mp4), so I can display it in video tag.
I need to cut part of mp4 file (i.e. from 5 to 10 seconds) and upload it on server.
My current solution: I upload whole video file on server with "from" and "to" parameters, cut it with ffmpeg on server, upload to s3 and return the url video.
Maybe is it possible only with JS/HTML? I found Blob.slice method but i didn't know how to use it to cut video parts.
Thanks!
An mp4 video file is made up of 'atoms' which are like blocks of information or data within a file.
They contain header and metadata about the tracks in the movie (Audio, video, subtitles etc) and also the media data itself.
The concepts are straightforward but an mp4 file is quite involved when you look at one - there is a good example here from the apple developers site (https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):
If you take a 'slice' of the mp4 file by simply taking bytes from some point in the file to some other point, you can see that you will be missing header information etc depending where you start from, and will also most likely start in the middle of an 'atom'.
Tools like ffmpeg do the hard work to extract and restructure the file when you want to cut part of the video.
There are projects which run ffmpeg in the bowser, but I'm not sure how practical or adopted they are - the one seems pretty popular anyway:
https://github.com/bgrins/videoconverter.js

FakePath issue in Chrome browser

I am making a browser based audio player. So for making a playlist from the local directory I am using :
<input type="file" id="getFile" />
Then I am using a button to confirm the playlist.On clicking the button I am calling a javascript function to change the src of the audio tag to play the new audio file selected in the playlist. I want the exact path of the file from the input file to run in the HTML5 audio player but it starts taking the path as C://Fakepath/filename.mp3. Can someone help me with this.
This is a security feature, by design. You should not be able to read the original file path of a file input into a browser form. File input is for reading file contents only, not metadata like path on the user's file system.
The good news is that you don't need the original file path. You can use FileReader's readAsDataURL to convert the file contents into a base64-encoded data URL and use that as the audio src. To read from #myUploadInput and output through #myAudioElement (also available as a working fiddle):
var reader = new FileReader();
reader.onload = function (event) {
document.getElementById("myAudioElement").src = event.target.result;
};
reader.readAsDataURL(document.getElementById("myUploadInput").files[0]);
if the user is 'building' / creating the playlist based on files they have locally you could do a 'browse' field (s) where they select the local audio files, then take the contents of the field (that Should include the paths to those images), build an array of the count/id, filename.mp3, and path... then, based on what is 'chosen' to play, just reassemble the full local path and play that file.
that would be an approach I would take anyway to see if it would work. the necessary piece here is getting the user to disclose the paths to the audio files... but Im still not 100% sure it would work given the security feature that the earlier commenter posted a link to.
if this were included in an application the user approved for local installation you could just refer to it using the 'application directory' and copy the file to that 'safe location' but since its web based it just really opens up a whole can of worms in terms of a potentially unapproved / authorized web function knowing your local directory structure. good luck, let me know if you find a solution.

audio tag prevent buffer

While using HTML5 audio tag, i am having a problem.
I am using icecast2 server to stream my music.
But the problem is, browser saves the buffer when stream is played. So when the player is paused or the page is refreshed, instead of asking server for the fresh stream, it plays the previously saved buffer only.
As i am playing live stream, i want always fresh stream to be played. What can i do to ensure that??
What i found after browsing is- HTML5 Video: Force abort of buffering
So creating a new audio tag is an option but i am not clear on it and also i dont know if it is a good way.
Probably the most common way to prevent caching of any HTTP resource (text files, images, audio, etc) is to append a meaningless random GET parameter onto the URL. So if your URL is like this:
http://musicserver.com/livestream.mp3
Then you'd do something like this:
http://musicserver.com/livestream.mp3?nocache=12034981237
Where the value of nocache is randomly generated each and every time. Then the browser will treat it as a new unique resource/file.

maintaining reference to client files between sessions

I'm developing a web app that works with video files -- specifically, I have the user 'select' their video file through a form input, I then construct a URL reference to that file, and set the <video> source to that URL. This allows me to work with user supplied content, without having to upload the video -- something that seems unnecessary, and will lead to decreased performance.
Here's my very simple code for now:
// within a change event for a file input
var videoFile = e.currentTarget.files[0];
var fileURL = URL.createObjectURL(videoFile);
var videoNode.src = fileURL;
This works great. The problem: It doesn't allow me to store a reference to this video in between user sessions. I've tried to save the fileURL into a Mongo document, and then later reload that video file... and while this works sometimes, it often breaks... with no clear consistency.
Does anyone have a good solution to storing reference to local files in between user sessions? Do I have to use something like the HTML5 Filesystem API? Localstorage?
I may have missed what you are getting at, but it sounds like you just need a cookie. http://www.w3schools.com/js/js_cookies.asp
You can save whatever file name you want in a simple cookie and then the next time they visit the page you recall the video name they want.

Ajax "ticker" from plain txt (not XML)

I am looking for a solution just to show in a html page the name of each song when played from a mp3 player.
I just have a .txt file outputted from a software that fetches in real time each song artist and name from the mp3 tag, when a new song is being played, with this format inside (the .txt file is also autoupdated each time, like a log file does):
[DAY-MONTH-YEAR HOUR:MIN:SEC] * Artist - Track
Example:
[24-07-2010 20:17:11] * Song 1
[24-07-2010 20:21:11] * Song 2
[24-07-2010 20:25:18] * Song 3
[24-07-2010 20:29:58] * Song ...
I need to get this data from the .txt file and put it into a html div, showing the new song name when it has been logged into the file until a new song is played.
Pretty simple I think, but I donĀ“t know how to work with this formatted text file (it cannot be changed), instead a typical XML file.
I have founded a script that works with XML (not plain text) and the behavior is other than I expect, because it rotates the messages each 5 seconds, not just when the new song is playing:
http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm
How can I get the [DAY-MONTH-YEAR HOUR:MIN:SEC] * formatted items in javascript?
How can I update the html div, each time a new item (song) is loaded in the .txt file?
Thanks in advance for your help.
There are several pieces of your architecture missing, which makes it difficult to answer your question.
Where did the javascript page come
from?
What is the connection to the server
that the javascript comes from and
the mp3 player?
Where is the text file, on a server
or updated on the local computer by
the mp3 player?
But, if I make several assumptions you might get on the more correct path.
First, if the mp3 player sends a message to a server, and the server updates the text file (big assumption) then what you can do it to either have the javascript application poll the server on some timed basis, to decide when the song changes, and the server can just return the current song.
Is there is reason the javascript application needs the entire text file?
The other option is to have the server open up a long-term connection, such as comet (http://en.wikipedia.org/wiki/Comet_%28programming%29), and the server can just push the data to the javascript application.
I am not answering your question about how to parse the formatted file, as I don't see yet that that would actually be useful to your problem, but as I mentioned, there are too many unknowns in your question.

Categories

Resources