0

I'm not sure how to word this but is it possible to use the information I've captured and then play it back to the user?

for example.

  • User presses btn1, btn2 and btn3 (there is a separate sound that responds to each button click)
  • Which button and time it was pressed is stored into an empty array ([{"time":1176,"elemId":"btn1"},{"time":1554,"elemId":"btn2"}])
  • Array is then saved into local storage
  • Array is then retrieved from local storage

Now from this point is it possible to playback the information in the array to mimic exactly what the user did?

Apologies if this is too vague but I'm not entirely sure what I'm looking for, thanks in advance!

EDIT: This is all I have so far, I can retreive my array and it shows in my console log but I can't think of how to progress from this point .

function get() {

 // Retrieve the object from storage
 var value = localStorage.getItem("eventlist");
 console.log('value:  ', JSON.stringify(value));
 }
user3464627
  • 55
  • 5

1 Answers1

0

Here's a fiddle I wrote: http://jsfiddle.net/n6R9S/1/

I didn't assume jQuery, although that would have been easier for me.

The function-in-a-function in the timeout is due to a scoping issue.

var playback = [{
    "time": 1176,
    "elemId": "btn1"
}, {
    "time": 1554,
    "elemId": "btn2"
}]

// Do we assume that the array is in order? If not, we have to re-order it to make sure.

var output = document.getElementById('output');
document.getElementById('btn1').onclick = function () {
    output.innerHTML += '1';
}
document.getElementById('btn2').onclick = function () {
    output.innerHTML += '2';
}

for (i = 0; i < playback.length; i++) {
    play = playback[i];
    setTimeout((function (play) {
        return function () {
            document.getElementById(play.elemId).onclick();
        }
    })(play), play.time)
}
000
  • 26,951
  • 10
  • 71
  • 101
  • Okay thanks this is great! I think the array I have is in order anyways but this is still useful. Would I have to manually input the array information? – user3464627 Mar 27 '14 at 14:54
  • I thought you already had the array information available through user input and local storage – 000 Mar 27 '14 at 14:56
  • Yes I have the array information but I'm not sure on how to automatically read and play it back. The key for it is called 'eventlist' would I just put: var playback = [{'eventlist'}] ? – user3464627 Mar 27 '14 at 15:07
  • playback = localStorage.getItem("eventlist"); – 000 Mar 27 '14 at 15:08
  • great thanks, on your JSfiddle the start button doesn't seem to do anything, the code executes itself automatically, was this intended? I tried wrapping the code you gave me in a get(); function so I can run it when it's needed but I'm getting an error "Uncaught TypeError: Cannot call method 'onclick' of null " on line 23 on your fiddle. – user3464627 Mar 27 '14 at 15:30
  • You're right, the button didn't do anything. Here's an updated fiddle to show how to organize the events: http://jsfiddle.net/n6R9S/2/ – 000 Mar 27 '14 at 15:36
  • You would get `Cannot call method 'onclick' of null` if the elemId doesn't actually exist on the page, like ` – 000 Mar 27 '14 at 15:37
  • How strange, my elements do exist though, I have "btn1" "btn2" "playback" and "output" just like in the fiddle – user3464627 Mar 27 '14 at 16:01
  • Add an `alert(play.elemId)` before the call to onclick() to see what it's looking for. – 000 Mar 27 '14 at 16:17
  • I was getting that error because it's not retrieving the 'eventlist' properly. If i manually type the values (like in the fiddle) it works perfectly. but when I do playback = localStorage.getItem("eventlist"); it doesn't, although I can see the values in my console with console.log(localStorage.getItem("eventlist")); – user3464627 Mar 27 '14 at 16:47
  • Ah. localstorage returns a string. You need to parse that string. `playback = JSON.parse(localStorage.getItem("eventlist"))` – 000 Mar 27 '14 at 16:49
  • That works perfectly, thank you :) I'm still find a bit of trouble when implementing it into my own app though... my buttons are actually divs that look like this "
    Bass
    " and in my console im getting this error "Uncaught TypeError: Object # has no method 'ontouchstart' " and I have no idea how to make it play the drums pads     – user3464627 Mar 27 '14 at 19:43
  • Try $(elemId).trigger('touchstart') – 000 Mar 27 '14 at 19:51
  • Is that Jquery? I installed it anyway to see if it worked and it doesn't. Now I'm getting a similar error "Uncaught ReferenceError: elemId is not defined " – user3464627 Mar 27 '14 at 19:59
  • Sorry I forgot you weren't using jquery. I'm just on my phone now. I don't know how to trigger touch events off the top of my head. – 000 Mar 27 '14 at 20:17
  • It's ok, I'm absolutely willing to use anything at this point – user3464627 Mar 27 '14 at 20:24
  • I suggest opening a new question. "How to trigger touch start and touch end events" – 000 Mar 27 '14 at 20:52