Web Audio API and Audio Download and Protection - javascript

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.

Related

How to append multiple audio files to a currently playing audio using Javascript?

I have a program that plays songs from the server. To make it more efficient i split the audio file on server into segments and the send them to the client using Ajax as base64 encoded. The HTML5 native audio player plays the base64 audio segment but when playing the next audio segment, it pauses a little and then plays. The retrieved segments are stored in IndexedDB for quick access but still it causes a pause in the playback. How to make the program more efficient as well as fix the audio pause happening between switching segments.
Is there any other way of appending audio file to a currently playing audio source without any pause using Javascript?
The Media Source Extensions API can do that, but note that you are just reinventing Range requests and caching, which are exactly what browsers already do for fetching media, but they do it better since they don't add the overhead of base64 on it.
So the "other way" is to configure your server to accept Range requests, to serve your file the most basically as possible in a single file, and to let the browser do its job.

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/

Creating an mp3 player for GWT

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.

How does Spotify mask the audio URL and also prevent download of song mp3

I'm looking to mask the audio playing on my site so people can't download the audio files and also don't know what the url for the actual file (mp3) is
Simple answer,
YOU CAN'T
If they are listening to your audio, they have it already
You can slow them down but can't stop them.
The only thing you can do is obfuscate the process. But why bother at all?
The browsers were designed to: Serve content - which means give the content to the user. To show you how easy it is, here's how I usually grab video/audios on virtually any streaming site:
Prepare the network tab of your preferred browser debugger and let the video/audio load. Then look for it in the loaded resources. Videos are usually streamed in .flv or .mp4, and audio in .mp3. When you spot the url, open a new tab/window and open the link there. The browser will then download the file.

How can I track the number of times an audio file from my server has been played?

I have audio files (.mp3 and .wav format) saved on my server. They're normally supposed to be played through a webpage and I can track how often that page is opened.
But people can now refer directly to that sound file's link on my server and play it. How do I track the number of times these audio files are played?
An example: Normally user access the recording through this page, https://namedrop.io/keshavmalani But now a person may choose to integrate their NameDrop recording into something else using the direct recording link: https://namedrop.io/profile/audio/km.mp3 and ideally I want to be able to track it.
I don't have a redirect to the audio file setup. Recommendation on how I would implement this without causing slowdown? I'm a beginner - intermediate coder.
Answer is here: How do I track file downloads
By: #w-ll (https://stackoverflow.com/users/146637/w-ll)
Thanks to #DanielProtopopov for pointing it out

Categories

Resources