Creating an mp3 player for GWT - javascript

I am creating a web application with GWT that needs to be able to upload and manipulate (play, pause, scroll, etc.) mp3 files from the user's computer. It also has to be able to add time stamps, whose information can later be downloaded. I can't seem to find any simple way to add an mp3 player to my application. Is there some widget pack or something I can download without having to develop it all on my own?

http://www.gwtproject.org/javadoc/latest/com/google/gwt/media/client/package-summary.html ?
The only thing you will be able to do in GWT client side is playing these mp3 files.
Adding timestamps, information you will have to do serverside.

Related

How to record an HTML animation and save it as a video, in an automated manner in the backend

I need to record a webpage and save it as a video, in an automated manner, without human interaction.
I am creating a NodeJS app that generates MP4 videos on the request of the user. The user provides an MP3 file, the app generates animated waveforms for the sound file on top of an illustration.
What I came up with so far is a system that opens a generated web page in the backend, plays the audio file, and shows audio visualization for the audio file on an HTML canvas element. On top of another canvas with mainly static components, such as images, that do not animate. The system records this, the output will be a video file. Finally, I will merge the video file with the sound file to create the final file for the user.
I came up with 2 possible solutions but both of them have problems which I am not able to solve at the moment.
Solution #1
Use a headless browser API such as Phantomjs or Puppeteer to snatch a screenshot x time every second and pipe it to FFmpeg.
The problem
The problem with this is that the process is not realtime. It would work fine if it's JUST an animation but mine is dependant on the audio file. The audio file will play-on during the render which results in a glitchy 1FPS-esque video.
Possible solution?
Don't play the audio file live but convert the audio file into raw data. Animate the audio visualization based on the raw data instead.
Not sure how to do this and if it's even possible.
Solution #2
Play, record, and save the animation, all in the frontend.
Could use ccapture.js to record and save a canvas.
Use a headless browser to open the page and save it to disk when it's done playing.
Doesn't sound like it's the best solution.
The problem(s)
I have more than 1 canvas.
It takes a while, especially when the audio file is longer than 10 minutes.
Making users wait for a long time can be a deal-breaker.
Possible solution?
Merge canvases into one.
No idea how to speed up the rendering time and I doubt it's possible this way.
Late answer from someone looking for similar options due to the convenience of some browser SVG APIs:
My first recommendation, as someone who has written a fair amount of my own audio visualization software, is to use a graphics library and language that don't require a browser or GPU, like Gd or Anti-grain Geometry or Cairo with any server-side language. You might also check out Processing.org (which I haven't used), not sure if there's a headless version.
If that's not possible, I've found these so far but haven't tried them:
https://github.com/tungs/timecut
https://github.com/myplanet/headless-render
https://wave.video/blog/how-we-render-animated-content-from-html5-canvas/

Web Audio API and Audio Download and Protection

I'm reading a book about Web Audio API.
In the book it states that to play and load a sound using the WEB AUDIO API, there are 4 steps that needs to be taken:
1.) Load the sound file with XHR and decode it. (Will end up with a 'buffer')
2.) Connect the buffer to audio effects nodes.
3.) To hear the sound, connect the last node in the effects chain to the destination.
4.) Start the sound.
My question is...given these 4 steps, is there a way for the user of the website that uses the Web Audio to download the audio/audios played on the website???
If so, how does one prevent this.
or does it being 'buffered' prevent it from being illegally downloaded?
I would like to find a way to protect the audio files I use inside my game/app that I put up on the webpage that are played with the Web Audio API.....
Thank you....
EASILY save it, no. But 1) if it's being transferred as an MP3, etc file the user can go into their network cache and copy it; there's no inherent DRM or anything. 2) Even if the sound was being generated completely from scratch (e.g. mathematically) the user could use a virtual audio device like Soundflower to save the output.
So no, it's not really possible to prevent the user from saving audio files.

Recording audio to internet - SoundCloud API?

So I need to allow clients to record audio to the internet. Best solution I've found so far which keeps them on our site is the Soundcloud API and I just give them our account details and they use a version of the Soundcloud recorder (Flash/Javascript) hacked together for out site.
Main issue is, these recordings are long. Maybe up to an hour. Because Soundcloud API records in the browser then uploads the audio and transcodes on its server there's a lot to go wrong in the upload process which takes a long time with a big file. It's ok if we just record the audio in say 20 min chunks but it's just not that reliable.
We tried to build our own using wami-recorder, but that meant transcoding from wav to MP3 in the browser before upload to make the file smaller, but taking more time on the client machine - at least Soundcloud does the transcoding server-side.
Given the size of the files should I be looking at a server side recorder/streaming solution based on red5 or something, or is a client side recorder with upload a better proposal?
thanks a lot!

Using JavaScript to read files stored on a user's computer

I'm building a website which has a music player that can currently play files stored on the server. I'm using soundManager2 to play the files.
What I would like to do is have the player also play files stored on a user's computer, which may not be possible and will probably hit security risks if it is.
This is a bit of the code I use to plays the files:
currentTrack = soundManager.createSound({
id: "Track",
url: file_location+".mp3",
});
Then soundManager2 does its magic. As the location of the file is a variable, I was hoping that if a user were to specify the location of an mp3 on their computer it could be put into the variable and played in soundManager, in the same way it finds files on our server and plays them. My thinking is that as soundManager uses javascript and flash, or HTML5 it's all client side so there wouldn't be any security issues and it could just be 'streamed' from their computer without any strain on our bandwidth.
How can this be done?
AFAIK, soundManager will not help you. However, Flash Player 10+ has the FileReference class, which can be used to load an user selected file directly to a SWF, which then can be played by Flash Player. Here is a description and a working example of how to do it: http://www.multimediacollege.be/2011/04/how-to-play-a-local-mp3-file-in-flash/

How to play local XviD (.avi) files that are chosen by the user in the browser?

So I'm building a web application, and in part of the application the user should choose an XviD (.avi) video file from his machine, to be played in the browser (without uploading it). I decided to use Flash for this.
Now I have two questions about this:
Which Flash video player is free to use and capable of doing this?
How should I let the user choose a video file, and how can I link the Flash video player to the file?
I think you can't. The Flash plugin don't have enough privileges to access the user's local file system.

Categories

Resources