Mercurial > hg > webaudioevaluationtool
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 } |