I wanna make a beat machine to play sounds at a given time. I need to pass in a bpm number. My first attempt was just to use a setInterval function to get a constant beat, but Im not sure if thats the way to go.
let beat = (bpm) => {
setInterval(()=> {
// Run update beat machine
}, (60 * 1000) / bpm)
}
I didnt find anything on the web. I appreciate articles as well.
thanks
No, that's not what you want. setInterval is not precise.
The Web Audio API has an AudioBufferSourceNode which keeps the sample in memory. It can be scheduled to start at a certain time.
bufferNode.start(0.5, startOffset);
In this example, we start playing 0.5 seconds from the offset.
I've recently coming across a lot of great examples of interactive shorts that are made with three.js.
One example is http://www.dilladimension.com/
So I wanted to ask - how does the timing in those actually work? Any known libraries for that?
Music & Visuals are synchronized perfectly and would love to know how.
I think you may be over thinking this.
// psuedo code...
// on start
music.start()
startMs = now()
// animation loop
for event in events {
if (!event.handled && (currentMs - startMs) > timelineEvent.startMs) {
event.doStuff();
event.handled = true;
}
}
Time marches on pretty predictably and measurably. If you know when you started, it's pretty easy to figure out where you are right now. Then simply compare that to a an array of timestamped events and execute their instructions.
I am developing a stopwatch application using Javascript/jQuery. The problem is that the milliseconds value is out of sync with REAL milliseconds. I am using function setInterval() with the interval of 1 millisecond, still it is causing this problem.
jsFiddle: http://jsfiddle.net/FLv3s/
Please help!
Use setInterval to trigger updates, but use the system time (via new Date()) for the actual time calculations.
To be honest, I tried nearly the same thing as you do now (Creating an accurate Metronome in Javascript only) - to make a long story short: To be absolutely accurate in terms of milliseconds (or lower) is sadly not (yet) possible with javascript only.
For more insight i recommend this question: Does JavaScript provide a high resolution timer?
or to be more precise this blog article: http://ejohn.org/blog/how-javascript-timers-work/
Best regards,
Dominik
Program execution in any language, not just JavaScript, is not realtime. It will take a tiny amount of time to actually run the code to increment your counter and update the view, and that throws the "timing" off.
Additionally, many browsers have a "minimum timeout" length, which varies between 4 and about 16 (the latter being the computer's own clock timer), which will really mess with your code.
Instead, you should use delta timing.
var startTime = new Date().getTime();
setInterval(function() {
var elapsed = new Date().getTime()-startTime;
// update view according to elapsed time
},25);
If you're worried about it looking choppy, consider using requestAnimationFrame instead, to update the timer exactly once per frame - this has the added benefit of not updating when the user switches tabs (but it will still be timing them) because if the tab is not active then there's no need to redraw stuff.
You can use the new performance object to get a more accurate time. Combine this with requestAnimationFrame instead of setInterval:
var startTime = performance.now(),
currentTime,
isRunning = true;
loop();
function loop(timeElapsed) {
currentTime = performance.now();
if (isRunning) requestAnimationFrame(loop);
}
Just subtract startTime from currentTime.
I left timeElapsed which contains time elapsed handed by rAF which you can may use also for something (or just ignore it).
One note though: not all browsers support this yet (and some may use prefix) so for mobile you need to use the standard system time object.
I'm looking for something like a "duration picker". Because googling "duration picker" doesn't give me any result, I would like to know if there is a technical name for it which can help in searching it. Time picker and Time Span picker doesn't bring anything helpful at the moment.
If something similar exists and someone can point me to that, it's ok instead of the technical name.
Update 1:
Sorry I completely forgot to explain what I mean by duration picker.
It's not a time picker, but a way to choose how much time will last doing something, not relative to a date. For example, cooking a given recipe will take (duration) 4 hours and 10 minutes. Traveling from here to there will take 4 days and 10 hours.
My basic idea is the possibility to configure the picker for the "bigger" unit to use (days probably), the duration will be expressed in seconds internally. So I can say 20 days and 23 hours and 0 minutes or if the "bigger" unit is days (for a software development job for example), I can write 150 hours and 30 minutes and 0 seconds.
It would be nice the option to hide some smaller fields, like minutes/seconds.
Update 2:
A very simple ui example:
You could use a set of customized jQuery spinners
$('#seconds').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$(this).spinner('value', ui.value - 60);
$('#minutes').spinner('stepUp');
return false;
} else if (ui.value < 0) {
$(this).spinner('value', ui.value + 60);
$('#minutes').spinner('stepDown');
return false;
}
}
});
like this:
http://jsfiddle.net/xHzMw/1/
I know this question is old, but it seems like a satisfactory answer wasn't reached. I made a jQuery plugin for this exact use case, i'll post it for anyone that comes looking in the future like I did.
https://github.com/Tartarus762/jquery-duration-picker
Bootstrap Duration picker - Github, npm.
Dependencies: jQuery and Bootstrap 3 (for styling only).
Its called just like you called it and exists at http://shop.ekerner.com/index.php/shop/javascript/duration-picker-detail
I think you're looking for something like this jQuery plugin: http://www.jqueryscript.net/time-clock/Lightweight-Duration-Picker-Plugin-For-jQuery-Semantic-UI.html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I've been looking around for a decent jQuery plugin that can handle both dates and times. The core UI DatePicker is great, but unfortunately I need to be able to take time in as well.
I've found a few hacks for the DatePicker to work with times, but they all seem pretty inelegant and Google isn't turning up anything nice.
Is there a good jQuery plugin for selecting dates and times in a single UI control with a usable interface?
By far the nicest and simplest DateTime picker option is http://trentrichardson.com/examples/timepicker/.
It is an extension of the jQuery UI Datepicker so it will support the same themes as well it works very much the same way, similar syntax, etc. This should be packaged with the jQuery UI imo.
#David, thanks for the recommendation! #fluid_chelsea, I've just released Any+Time(TM) version 3.x which uses jQuery instead of Prototype and has a much-improved interface, so I hope it now meets your needs:
http://www.ama3.com/anytime/
Any problems, please let me know via the comment link on my website!
In my view, dates and times should be handled as two separate input boxes for it to be most usable and efficient for the user to input. Let the user input one thing at a time is a good principle, imho.
I use the core UI DatePicker, and the following time picker.
This one is inspired by the one Google Calendar uses:
jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker
I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.
PS:
In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).
My best experience with a datepicker is with the prototype-based AnyTime. I know that's not jQuery, but it may still be worth the compromise for you. I know absolutely no prototype, and it's still easy enough to work with.
One caveat I've found: it is not forward compatible on some browsers. That is, it did not work with a newer version of prototype on Chrome.
Just to add to the info here, The Fluid Project has a nice wiki write-up overviewing a large number of date and/or time pickers here.
I researched this just recently and have yet to find a decent date picker that also includes a decent time picker. What I ended up using was eyecon's awesome DatePicker, with two simple dropdowns for time. I was tempted to use Timepickr.js though, looks like a really nice approach.
I have ran into that same problem. I actually developed my using server side programming, but I did a quick search to try and help you out and found this.
Seems alright, didn't look at the source too much, but seems to be purely JavaScript.
Take look:
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
Here is the demo page link:
http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm
good luck
This is some code I use to have a user select one
datetimepicker, set the datetime, and have the
other datetimepicker add One Minute to that time.
I needed this for a custom medication control....
Anyway, thought it might help someone else since I could
not find the answer any where online...
(at least not a complete answer)
Keep in mind that the 60000 added, adds one minute.
(60 * 1000 milliseconds)
$('.frdtPicker').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('.todtPicker');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate) {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
}
else {
var testStartDate = new Date(dateText).getTime() + 60000;
var testStartDate2 = new Date(testStartDate);
endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
}
$('.frdtPicker').val(dateText); //endDateTextBox.val());
},
onSelect: function(selectedDateTime) {
var start = $(this).datetimepicker('getDate');
$('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});
Take a look at the following JavaScript plugin.
Javascript Calendar with date and time
I've made it to be simple as possible. but it still in its early days.
Let me know the feedback so I could improve it.
Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.
I just bound the click event to pop it up:
$(".arrival-date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
I make one function like this:
function getTime()
{
var date_obj = new Date();
var date_obj_hours = date_obj.getHours();
var date_obj_mins = date_obj.getMinutes();
var date_obj_second = date_obj.getSeconds();
var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
return date_obj_time;
}
Then I use the jQuery UI datepicker like this:
$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );
So, I get the value like this: 2010-10-31 12:41:57
We had trouble finding one that worked the way we wanted it to so I wrote one. I maintain the source and fix bugs as they arise plus provide free support.
http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx