Mercurial > hg > webaudioevaluationtool
comparison interfaces/horizontal-sliders.js @ 1160:f0fa49f5bbb0
Interfaces have startPlayback and stopPlayback methods to clean up code management. Looping playbacks now have a 2s cross-fade.
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Tue, 26 Jan 2016 13:52:56 +0000 |
parents | 79291bafbf5e |
children | cb348f6208b2 c0022a09c4f6 |
comparison
equal
deleted
inserted
replaced
1159:48b16162cdd0 | 1160:f0fa49f5bbb0 |
---|---|
264 this.play.onclick = function(event) | 264 this.play.onclick = function(event) |
265 { | 265 { |
266 var id = Number(event.currentTarget.value); | 266 var id = Number(event.currentTarget.value); |
267 //audioEngineContext.metric.sliderPlayed(id); | 267 //audioEngineContext.metric.sliderPlayed(id); |
268 audioEngineContext.play(id); | 268 audioEngineContext.play(id); |
269 $(".track-slider").removeClass('track-slider-playing'); | |
270 $(event.currentTarget.parentElement).addClass('track-slider-playing'); | |
271 var outsideReference = document.getElementById('outside-reference'); | |
272 if (outsideReference != null) { | |
273 $(outsideReference).removeClass('track-slider-playing'); | |
274 } | |
275 }; | 269 }; |
276 this.resize = function(event) | 270 this.resize = function(event) |
277 { | 271 { |
278 this.holder.style.width = window.innerWidth-200 + 'px'; | 272 this.holder.style.width = window.innerWidth-200 + 'px'; |
279 this.slider.style.width = window.innerWidth-420 + 'px'; | 273 this.slider.style.width = window.innerWidth-420 + 'px'; |
287 }; | 281 }; |
288 this.updateLoading = function(progress) | 282 this.updateLoading = function(progress) |
289 { | 283 { |
290 // progress is a value from 0 to 100 indicating the current download state of media files | 284 // progress is a value from 0 to 100 indicating the current download state of media files |
291 }; | 285 }; |
286 this.startPlayback = function() | |
287 { | |
288 // Called when playback has begun | |
289 $(".track-slider").removeClass('track-slider-playing'); | |
290 $(this.holder).addClass('track-slider-playing'); | |
291 var outsideReference = document.getElementById('outside-reference'); | |
292 if (outsideReference != null) { | |
293 $(outsideReference).removeClass('track-slider-playing'); | |
294 } | |
295 }; | |
296 this.stopPlayback = function() | |
297 { | |
298 // Called when playback has stopped. This gets called even if playback never started! | |
299 $(this.holder).removeClass('track-slider-playing'); | |
300 }; | |
292 this.getValue = function() | 301 this.getValue = function() |
293 { | 302 { |
294 // Return the current value of the object. If there is no value, return 0 | 303 // Return the current value of the object. If there is no value, return 0 |
295 return this.slider.value; | 304 return this.slider.value; |
296 }; | 305 }; |
313 var node = storage.document.createElement('value'); | 322 var node = storage.document.createElement('value'); |
314 node.textContent = this.slider.value; | 323 node.textContent = this.slider.value; |
315 return node; | 324 return node; |
316 }; | 325 }; |
317 }; | 326 }; |
327 | |
328 function outsideReferenceDOM(audioObject,index,inject) | |
329 { | |
330 this.parent = audioObject; | |
331 this.outsideReferenceHolder = document.createElement('button'); | |
332 this.outsideReferenceHolder.id = 'outside-reference'; | |
333 this.outsideReferenceHolder.className = 'outside-reference'; | |
334 this.outsideReferenceHolder.setAttribute('track-id',index); | |
335 this.outsideReferenceHolder.textContent = "Play Reference"; | |
336 this.outsideReferenceHolder.disabled = true; | |
337 | |
338 this.outsideReferenceHolder.onclick = function(event) | |
339 { | |
340 audioEngineContext.play(event.currentTarget.getAttribute('track-id')); | |
341 }; | |
342 inject.appendChild(this.outsideReferenceHolder); | |
343 this.enable = function() | |
344 { | |
345 if (this.parent.state == 1) | |
346 { | |
347 this.outsideReferenceHolder.disabled = false; | |
348 } | |
349 }; | |
350 this.updateLoading = function(progress) | |
351 { | |
352 if (progress != 100) | |
353 { | |
354 progress = String(progress); | |
355 progress = progress.split('.')[0]; | |
356 this.outsideReferenceHolder[0].children[0].textContent = progress+'%'; | |
357 } else { | |
358 this.outsideReferenceHolder[0].children[0].textContent = "Play Reference"; | |
359 } | |
360 }; | |
361 this.startPlayback = function() | |
362 { | |
363 // Called when playback has begun | |
364 $('.track-slider').removeClass('track-slider-playing'); | |
365 $('.comment-div').removeClass('comment-box-playing'); | |
366 $(this.outsideReferenceHolder).addClass('track-slider-playing'); | |
367 }; | |
368 this.stopPlayback = function() | |
369 { | |
370 // Called when playback has stopped. This gets called even if playback never started! | |
371 $(this.outsideReferenceHolder).removeClass('track-slider-playing'); | |
372 }; | |
373 this.exportXMLDOM = function(audioObject) | |
374 { | |
375 return null; | |
376 }; | |
377 this.getValue = function() | |
378 { | |
379 return 0; | |
380 }; | |
381 this.getPresentedId = function() | |
382 { | |
383 return 'reference'; | |
384 }; | |
385 this.canMove = function() | |
386 { | |
387 return false; | |
388 }; | |
389 } | |
318 | 390 |
319 function resizeWindow(event) | 391 function resizeWindow(event) |
320 { | 392 { |
321 // Called on every window resize event, use this to scale your page properly | 393 // Called on every window resize event, use this to scale your page properly |
322 | 394 |