comparison mushra.js @ 800:62cd4657fc38

MUSHRA: Slider styling across browsers so easy to see. Sliders start grey and turn white when moved. Added mushra example test
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Fri, 18 Dec 2015 12:04:04 +0000
parents 43801b3d6131
children 36e04b076113
comparison
equal deleted inserted replaced
799:43801b3d6131 800:62cd4657fc38
179 this.title.textContent = audioObject.id; 179 this.title.textContent = audioObject.id;
180 this.title.style.width = "100%"; 180 this.title.style.width = "100%";
181 this.title.style.float = "left"; 181 this.title.style.float = "left";
182 182
183 this.slider.type = "range"; 183 this.slider.type = "range";
184 this.slider.className = "track-slider-range"; 184 this.slider.className = "track-slider-range track-slider-not-moved";
185 this.slider.min = "0"; 185 this.slider.min = "0";
186 this.slider.max = "1"; 186 this.slider.max = "1";
187 this.slider.step = "0.01"; 187 this.slider.step = "0.01";
188 this.slider.setAttribute('orient','vertical'); 188 this.slider.setAttribute('orient','vertical');
189 this.slider.style.height = window.innerHeight-250 + 'px'; 189 this.slider.style.height = window.innerHeight-250 + 'px';
191 { 191 {
192 var time = audioEngineContext.timer.getTestTime(); 192 var time = audioEngineContext.timer.getTestTime();
193 var id = Number(this.parentNode.getAttribute('trackIndex')); 193 var id = Number(this.parentNode.getAttribute('trackIndex'));
194 audioEngineContext.audioObjects[id].metric.moved(time,this.value); 194 audioEngineContext.audioObjects[id].metric.moved(time,this.value);
195 console.log('slider '+id+' moved to '+this.value+' ('+time+')'); 195 console.log('slider '+id+' moved to '+this.value+' ('+time+')');
196 $(this).removeClass('track-slider-not-moved');
196 }; 197 };
197 198
198 this.play.textContent = "Loading..."; 199 this.play.textContent = "Loading...";
199 this.play.value = audioObject.id; 200 this.play.value = audioObject.id;
200 this.play.style.float = "left"; 201 this.play.style.float = "left";
201 this.play.style.width = "100%"; 202 this.play.style.width = "100%";
202 this.play.disabled = true; 203 this.play.disabled = true;
203 this.play.onclick = function(event) 204 this.play.onclick = function(event)
204 { 205 {
205 var id = Number(event.srcElement.value); 206 var id = Number(event.currentTarget.value);
206 //audioEngineContext.metric.sliderPlayed(id); 207 //audioEngineContext.metric.sliderPlayed(id);
207 audioEngineContext.play(id); 208 audioEngineContext.play(id);
208 $(".track-slider").removeClass('track-slider-playing'); 209 $(".track-slider").removeClass('track-slider-playing');
209 $(event.currentTarget.parentElement).addClass('track-slider-playing'); 210 $(event.currentTarget.parentElement).addClass('track-slider-playing');
210 }; 211 };
227 228
228 this.resize = function(event) 229 this.resize = function(event)
229 { 230 {
230 this.holder.style.height = window.innerHeight-200 + 'px'; 231 this.holder.style.height = window.innerHeight-200 + 'px';
231 this.slider.style.height = window.innerHeight-250 + 'px'; 232 this.slider.style.height = window.innerHeight-250 + 'px';
232 } 233 };
233 this.updateLoading = function(progress) 234 this.updateLoading = function(progress)
234 { 235 {
235 progress = String(progress); 236 progress = String(progress);
236 progress = progress.substr(0,5); 237 progress = progress.substr(0,5);
237 this.play.textContent = "Loading: "+progress+"%"; 238 this.play.textContent = "Loading: "+progress+"%";
238 } 239 };
239 240
240 if (this.parent.state == 1) 241 if (this.parent.state == 1)
241 { 242 {
242 this.enable(); 243 this.enable();
243 } 244 }