Some help please.
My project will have 12 scenes with audio. Although I think there’s nothing wrong with the way I did it now, I thought there might be a more elegant solution, not four functions for each scene. Am I right and does someone have a better idea? Or shall I continue this way?
TIA, Djon
edraken gitaar nl.zip (2.7 MB).g
If you use the latest adaption to get the Hype scene details which @MaxZieb has put into extension form , you then only need one function.
You can load the Extension on the first scene. The Extension is added to the hypeDocuments scope.
From there we can query the current scene for its auto element by tag.
And we also just need to give each button and other elements a class name like play, pause, slider, rewind, Range.
Then we can get each scenes buttons and range values
We then use a switch to do the corresponding actions related to the button class name that was clicked.
This all means we do not need loads of functions and we use class names which is a normal rather giving multiple elements the same id and we do not need to mess about with scene names.
Extension code:
hypeDocument.getCurrentSceneIndex = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if ( sa[i].style.display === "block") return i;
}
}
hypeDocument.getCurrentSceneElement = function(){
var hc = document.getElementById(hypeDocument.documentId());
var sa = hc.getElementsByClassName("HYPE_scene");
for (i = 0; i < sa.length; i++) {
if ( sa[i].style.display === "block") return sa[i];
}
}
control function: ( all buttons run this )
var eleClass = element.classList[1];
var hypeESceneElement = hypeDocument.getCurrentSceneElement();
var myAudio = hypeESceneElement.querySelector('audio');
var mySpeed = hypeESceneElement.querySelector('.speed');
var myRange = hypeESceneElement.querySelector('.Range').value
switch(eleClass) {
case "play":
myAudio.play();
break;
case "pause":
myAudio.pause();
break;
case "slider" :
mySpeed.innerHTML = myRange;
myAudio.playbackRate = 0.01 * myRange;
break;
case "rewind" :
myAudio.currentTime = 0;
break;
}
This means that the class for the element that called the function must have the class used in the switch statement as the first class in the class list. (wow so many uses of 'class' there :))
Any way to protect against this? maybe using classList.contains...
Or just a simple case of make sure it's the first in the list (in the Identity inspector)
Wow, that looks a bit complicated for me now, but I’ll dive into it and see if I can understand it. Anyway it is very useful for future projects I immagine. Thank you for this Mark.
Yes but the HYPE_scene is added automagically I also phrased it class list (not classList) for that reason perhaps I should have added "in the identity inspector" there too I'm writing for people that may not understand Javascript and are simply looking at the Hype document.
Is there a way to apply the principles of accelerated playback to Video?
I have tried to adapt the file above to a Video but am not able to crack it. My goal is to play the video in accelerated speed for 5 seconds and then return back to normal speed. I have included all the functionality from the file to make it easier to solve. Apologize that I have not tried to simulate the 5 second accelerated function as I really am not sure how.