Too many functions. Another approach?


#1

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


#2

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à


#3

That’s great Max! Thank you.


(Mark Hunte) #4

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)


Get the Scene Container and Number
#5

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)


#6

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.


(Mark Hunte) #7

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…


#8

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:


(Mark Hunte) #9

Lol, ok I get ya.


Playing different Audio in different Scenes using the same ID