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');
}
Related
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.
I'm a beginner/amateur ruby developer working on an app for users to upload audio files.
I'm looking for the best way to track and display plays in the users profile.
Any help would be appreciated..
Audio.js has nice documentation. Don't be shy and feel free to read it.
About your question: You can execute ajax request to your backend each time when audio track ends. Just override this method:
trackEnded: function(e) {},
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.
I'm developing a collaborative audio recording platform for musicians (something like a cloud DAW married with GitHub).
In a nutshell, a session (song) is made of a series of audio tracks, encoded in AAC and played through HTML5 <audio> elements. Each track is connected to the Web Audio API through a MediaElementAudioSourceNode and routed through a series of nodes (gain and pan, at the moment) until the destination. So far so good.
I am able to play them in sync, pause, stop and seek with no problems at all, and successfully implemented the usual mute, solo functionalities of the common DAW, as well as waveform visualization and navigation. This is the playback part.
As for the recording part, I connected the output from getUserMedia() to a MediaStreamAudioSourceNode, which is then routed to a ScriptProcessorNode that writes the recorded buffer to an array, using a web worker.
When the recording process ends, the recorded buffer is written into a PCM wave file and uploaded to the server, but, at the same time, hooked up to a <audio> element for immediate playback (otherwise I would have to wait for the wav file to be uploaded to the server to be available).
Here is the problem: I can play the recorded track in perfect sync with the previous ones if I play them from the beginning, but I can't seek properly. If I change the currentTime property of the newly recorded track, it becomes messy and terribly out of sync — I repeat that this happens only when the "local" track is added, as the other tracks behave just fine when I change their position.
Does anyone have any idea of what may be causing this? Is there any other useful information I can provide?
Thank you in advance.
Fundamentally, there's no guarantee that elements will sync properly. If you really want audio to be in sync, you'll have to load the audio files into AudioBuffers and play them with BufferSourceNodes.
You'll find in some relatively straightforward circumstances you can get them to sync - but it won't necessarily work across devices and OSes, and once you start trying to seek, as you found, it will fall apart. The way wraps downloading, decoding and playing into one step doesn't lend itself to syncing.
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.