Too many functions. Another approach?

Hi,

Some help please.:slight_smile:
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

You only need four functions. But you will have to make sure that…

  • You name your scenes without whitespaces
  • That the musicplayer ID in each scene is player_{SCENENAME} so in brazil it is player_brazil

The code in the play, pause and stop etc. needs to be adjusted

var myAudio = document.getElementById( "player_"+hypeDocument.currentSceneName() );
myAudio.pause(); 

Voilà

1 Like

That’s great Max! Thank you.

If you use the latest adaption to get the Hype scene details which @MaxZieb has put into extension form :hugging:, 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;
     
}

draken gitaar nl_VMH 2.hype.zip (2.9 MB)

1 Like

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.

I think you mean second since this is an array index. :smile:

The first will be 'HYPE_element' which is always added by default.
The second class will be the first class you add in the inspector.

Thanks,
I thought about using that but was not overly sure of it's compatibility ( older browsers) and it's was 2 in the morning...

Yes but the HYPE_scene is added automagically :slight_smile: I also phrased it class list (not classList) for that reason perhaps I should have added "in the identity inspector" there too :slight_smile: I'm writing for people that may not understand Javascript and are simply looking at the Hype document. :stuck_out_tongue:

Lol, ok I get ya.

Hi @MarkHunte and Friends,

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.

Would appreciate any help.

Thanks!

HappyHyper

Accelerate Video.hype.zip (2.1 MB)

Use the video.playbackRate feature recently discussed on this forum. Positive increments are supported cross browser. Negative values not!

https://www.w3schools.com/Tags/av_prop_playbackrate.asp

3 Likes

Brilliant! Thank you Max!

Here is the simple line of code to accelerate the video 5 times for 2 seconds and then return to normal (1.0).

var vid = hypeDocument.getElementById('video')
vid.playbackRate = 5.0; 

setTimeout(function(){
vid.playbackRate = 1.0;; 
},2000);
3 Likes