HTML5 audio, testing if playing with javascript - javascript

Alright so I have audio on my site, and I want a user to only be able to play one audio at a time, regardless of how many tabs or windows the user has open. So if the user starts a new song in a different tab, the other one stops playing. Quick disclaimer: I have it working right now, but it's not a good method. Right now I have it so that when the user starts an audio file, it creates a php session with a random id for the instance of the playback. Then if a song is playing, it constantly sends ajax to the server to see if the session id is the same as the song's playback id. if the id is not the same, the playback stops. So right now it's working 100% how I want it, but it's sending so many requests to the server so I know there has to be a better way with using cookies or something. Please help if you can.

This can be done with HTML5 Web Storage and Cross-tab communication. Check out an example here and here.

Related

Voice modulator through Javascript possible?

I'm trying to build an app that will take mic input, modulate it, and then broadcast it as an audio source that my web browser can then use.
Use cases for this would be like on a video call. If I need to change my voice to artificially make it louder or perform other modulations, I would use this app.
Right now I have the first 2 steps of getting the mic input and modulating it done, but I'm stuck on the third. How do I broadcast it back to the system as a viable audio source (or in the terms of the app, how to do I get the video call to pick up the sound I'm outputting)?
Some of the ideas I've seen so far have been trying to play the modulated sound back into the microphone object but I don't see a reliable way to do that.
In summary: Is there any way with Javascript (in the browser) or NodeJS to take a sound and register or broadcast it as an audio source that the browser can use?
I don't even know if this is possible and if the answer is "no", then please answer that. There might be some security issues with this that I am totally overlooking. In the end, this question is if nothing, conceptional.

Play audio on specific time from database

I’m building a audioplayer based on Howler.js that plays audio on specific time without refreshing.
The plan is to make a small CMS system where I can make the schedule including the audio file.
The challenging part: How can I read my database (MySQL) realtime checking if it’s time to play?
it's working by checking the database every second (And reloading the page), but I think it’s not a solution. ;-)
Is there someone with a brilliant advice?
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onended
let sound=new Audio('sound.mp3');
sound.play(); // play sound
sound.onended=function (){
alert('sound the end');
}

How to remove and then re-add a twilio video-track playing in a div?

I am using the twilio video chat api to make a video calling app. I want to allow users to manually enable and disable video from other participants in the room without disabling the audio during low bandwidth scenarios, using a toggle button. To do this I think I need to get hold of the track playing in a particular div and then use track.detach. How can I get the twilio track from its container div?
After I remove it, how can I add it back when(if) the bandwidth improves?
Twilio developer evangelist here.
Currently with the Video SDK you can't unsubscribe from tracks, all tracks are sent to each member in the conversation. So, while you can detach a track from the DOM and stop showing it, the media will still be sent to the browser.
You could get the sending client to use smaller constraints to send the videos and we do have bandwidth controls in the SDK on the roadmap, so more control is coming.

Prevent downloading videos in temp folder while watching videos in web browser

I created a web application using Java and html5. I have uploaded few videos in tomcat server war folder.Say my war file name is "web". Then my videos are inside /opt/Apache/WebApps/web/videos/sample.mp4".
I am using html5 video tag for playing the videos.Most of the video size is more than 100mb.
My video tag is like
<video src="/videos/sample.mp4"></video>
Whenever I played the video, automatically download inside our temp folder of my c drive. My system RAM size is 128mb. So when I watched two or more videos, suddenly PC gets struck due to less memory.
How to avoid this using jQuery, Java servlet,jsp
Base on my experience, you can't. But try to make it harder to download.
Browsers make grabbing too easy
Because that's what browsers were designed to do: Serve content - which means give the content to the user. To show you how easy it is, here's how I usually grab videos on virtually any video streaming site:
Prepare the network tab of your preferred browser debugger and let the video 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.
Making it harder
Here are methods on making a grabber's life harder. Like I said earlier, these are not fool-proof methods, but can at least ward off skiddies.
Video to Canvas technique
Recently I came across this article from HTML5Doctor while researching motion detection in JS. This involves streaming your video via a , then with some JS, literally copy the video to a . Here's an example where the video is up front, while the canvas at the back get's fed with data from that same video.
Essentially, what you do is:
Predefine on the HTML or dynamically insert a to the DOM. This is the "player" that the user sees.
Dynamically create a video tag via JS, append it to the DOM hidden and give it a url to stream. This will be the video source for the canvas.
Then with JS, you periodically grab data from the you just created and draw it to the . With this step, the video gets fed to the canvas.
That's the very basic of the entire routine. Since your player is now the canvas and the true video hidden, you can try right-clicking all you want and save. Since the canvas acts like an image on the page, you can only save a shot of a frame that was displayed on the canvas. As for controls, JS has an API for controlling so you can create custom buttons and sliders.
However, if they know you are doing this, they will find your hidden video element, and you are screwed. This leads us to the next method that complements this front-end only technique, with aid from the server side.
Temporary resource urls
One thing you can do to prevent this method is to prevent the link from being reusable. Make the link disposable, temporary, one-time use only. Once the player loads using the disposable url, dispose of it. Make it unusable.
Similar to CSRF prevention, when a browser requests a page with your video, have it generate a random token and store it in some storage on the server side for later reference. At the same time, append it to the url of your video, something like this:
//we load some video with id 1234324 from your site using this url
//and the token generated on page load is appended as sid
http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9
Now when your player loads the video, it will use this url that carries the token. Have the server validate the token.
If it's good, stream the video and destroy the token from the server to avoid reuse. This essentially makes the url "one time use only". If an invalid token is used, return the appropriate headers as the response, like a 403 perhaps.
To add a bit more security, impose an expiry of the url by storing it's timestamp along with the token. Then compare the request timestamp with the stored timestamp if it's still within the "use window". Make this "use window" short enough to be used by the player on the page, but not long enough for a skiddie to grab that url and paste it into another tab/window/downloader.

How can I provide a 1 minute preview of a live flash video stream using Javascript?

I have a site that is streaming live videos, and I want to offer a one minute free preview to users before they pay for a stream. I am using JW Player - I was thinking of triggering a timer when the play button is clicked, and then removing a div containing the player once the timer is finished. I am already using jQuery on this page.
What methods can I take to secure this? Is there another way to do this - I am using a CDN so server-side is somewhat limited.
It's not possible to build a secure 60-seconds-only preview of the full video that way; the only way to be sure that no one could exploit the javascript code and see the entire video is to create a separate video file of 60 seconds only and to play that one instead of the real full video.
This is so because the javascript code is run on the client and it would be pretty easy to disable, edit it or, even simpler, to spot the URL of the full version of the video in the code.
Moreover it's better to protect the download of the full video file checking that every HTTP request made to download it corresponds to a user who has paid for it.
Unless you're using proper streaming (eg RTMP), the whole file will be accessible for direct download by users with access to this pseudo-preview. To properly limit access, you'll want to either implement streaming and limit the free stream server side, or use a one minute file and a protected full video.
To solve this I used JW Player's events to fire a setTimeout call for 60 seconds later. I then hid the player and popped up a modal jQuery UI dialog over the screen. It's not particularly secure but is sufficient for my needs.

Categories