Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).ready(function() {
- var paused = true;
- var interval;
- var currentTime = 0;
- var duration = 100;
- var pButton = document.getElementById('pButton'); // play button
- var playhead = document.getElementById('playhead'); // playhead
- var timeline = document.getElementById('timeline'); // timeline
- // timeline width adjusted for playhead
- var timelineWidth = 200;
- // play button event listenter
- pButton.addEventListener("click", play);
- // makes timeline clickable
- timeline.addEventListener("click", function(event) {
- moveplayhead(event);
- }, false);
- // returns click as decimal (.77) of the total timelineWidth
- function clickPercent(event) {
- return (event.clientX - getPosition(timeline)) / timelineWidth;
- }
- // makes playhead draggable
- playhead.addEventListener('mousedown', mouseDown, false);
- window.addEventListener('mouseup', mouseUp, false);
- // Boolean value so that audio position is updated only when the playhead is released
- var onplayhead = false;
- // mouseDown EventListener
- function mouseDown() {
- onplayhead = true;
- window.addEventListener('mousemove', moveplayhead, true);
- }
- // mouseUp EventListener
- // getting input from all mouse clicks
- function mouseUp(event) {
- if (onplayhead == true) {
- moveplayhead(event);
- window.removeEventListener('mousemove', moveplayhead, true);
- // change current time
- }
- onplayhead = false;
- }
- // mousemove EventListener
- // Moves playhead as user drags
- function moveplayhead(event) {
- var newMargLeft = event.clientX - getPosition(timeline);
- if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
- playhead.style.marginLeft = newMargLeft + "px";
- currentTime = (timelineWidth * (newMargLeft / duration));
- }
- if (newMargLeft < 0) {
- playhead.style.marginLeft = "0px";
- currentTime = 0;
- }
- if (newMargLeft > timelineWidth) {
- playhead.style.marginLeft = timelineWidth + "px";
- currentTime = duration;
- }
- }
- // timeUpdate
- // Synchronizes playhead position with current point in audio
- function timeUpdate() {
- var playPercent = timelineWidth * (currentTime / duration);
- playhead.style.marginLeft = playPercent + "px";
- $.post("/ticktock", {
- javascript_data: currentTime
- });
- $.ajax({
- url: "/eval_network",
- type: 'GET',
- dataType: 'json',
- contentType: 'application/json',
- mimeType: 'application/json',
- success: function(data) {
- // source.addFeatures(featuresLive);
- var feat = source.getFeatures();
- for (var i = 0; i < feat.length; i++) {
- var id = feat[i].O.id;
- for (var j = 0; j < data[1].length; j++) {
- if (id == data[1][j].id) {
- feat[i].flow = data[1][j].flow;
- }
- }
- }
- console.log(feat);
- },
- error: function(data, status, er) {
- console.log(er);
- }
- });
- }
- //Play and Pause
- function play() {
- if (paused) {
- paused = false;
- // remove play, add pause
- pButton.className = "";
- pButton.className = "pause";
- interval = setInterval(function() {
- currentTime += 5;
- timeUpdate();
- }, 2000);
- } else { // pause music
- // remove pause, add play
- paused = true;
- pButton.className = "";
- pButton.className = "play";
- clearInterval(interval);
- interval = 0;
- }
- }
- // Returns elements left position relative to top-left of viewport
- function getPosition(el) {
- return el.getBoundingClientRect().left;
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement