Muting from outside document issue

Elements Audio & Video
1

Hi all,

I’ve having some issues with muting audio files from outside a hype document.
Here’s the setup:

screenie2.png946×743 57.7 KB

This animation is on a course page, by using the numbered/arrow buttons you change the content BUT you don’t ever actually reload the browser page itself. So the issue here is that longer/looped sounds from various animations will continue to play even when the course page content has changed (unfortunately removing looped/longer sounds is not an option).

I need a way of muting audio files on the course pages by clicking on these buttons, on some pages there are multiple animations. I’ve read through various other topics on here about ways of muting sounds but none of them are applicable for my scenario.

Hope this is clear enough, i’m open to any ideas you’ve got!!

Hype document in my example is attached:

p1_mainobjectives.zip (1.8 MB)

2

Hmm,

It would help to see the external document and what you are doing.

I assume you are using the methods from here;

So if I understand you correctly the easiest thing maybe to add a stopAudio timeline with the keyframe actions to stop the audio.

Then make two calls on the onclick.

<a href = "#" onclick = "HYPE.documents['TypeText'].startTimelineNamed('stopAudio');HYPE.documents['TypeText'].showSceneNamed('scene2')">Jump To My Scene</a>

This works in my tests.

On a side note, I have possibly an easier way for you to set up the typed text.

The way I would do this is to create three timelines, one for each typed text section.

On the first timeline I would then have the animation for the Red text 1 start, and the action for starting the typewriter sound. In the same action I would add another action to call a javascript function ( i will come to that in a min).
Then the other two action down stream to start the bell sound and stop the typewriter sound.

repeat this for the other text red numbers and sound starts and stops in two more timelines. ( including the JS function )

The Main Timeline will start these timelines at the correct times.

The JS function is an adaption of my Type Text code.

This adaption uses the name of the timelines to work out which text to start typing.
So the three timeline are named

text1
text2
text3

The big text boxes then get an id that matches it's timeline.
I.e

text1
text2
text3

In the JS function you then add three arrays.

Each array contains two items.

Item 1 will be the text to type, item two will be the speed to type it.
Each array will get a corresponding global variable name.

window.text1CharArray
window.text2CharArray
window.text3CharArray

We can now use the name of timeline calling the JS to choose the correct array by joining the timeline name with "CharArray".
We also use the time line name to get the Text box that whose id matches it.

Here is the working example.

My thoughts are that this will save time constructing the typing on a timeline and innerText properties.

All you then need to do is setup the Actions to start the text timelines at the right time, work out the speed for the text to type for each section. ( this was very easy to do for me, I just went up or down 20 milliseconds on the numbe in second item in the text arrays)

NewType_and_External_Calls_Example.zip (1.7 MB)

NewTypeText.hype.zip (1.7 MB)

2 Likes
3

Hi @MarkHunte

Thank you for such a detailed reply!
Your stopAudio timeline idea seems to be working well so far.

I should mention though for some reason I couldn’t open your attached files, kept saying I needed to update hype but each time I checked for updates it said it was completely up to date.

4

You should be on 3.6.1

1 Like
5

Actually I think the issue is that i’m using Hype 3 Beta.

Could I possibly ask for one last bit of advice?

I have this javascript code on my numbered buttons:

var hype;

if ("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
}

window.HYPE_eventListeners.push({ 'type': 'HypeSceneLoad', 'callback': getDoc });

function getDoc(hypeDocument, element, event) {
    hype = hypeDocument.documentName();
}

$('.hype_page_no').click(function () {
    if (typeof HYPE !== 'undefined') {
        HYPE.documents[hype].startTimelineNamed('stopAudio');
        HYPE.documents[hype].pauseTimelineNamed('Main Timeline');
    }
    window.scrollTo(0, 0);
});

Now this code will stop the audio on one animation but not another, how can I get it to cycle through the document names that it retrieves?

6

Can you post me the hype project and the external page, it will make it easier to help you.

Also did you manage to look at the way I suggest you do the typing. It will save a lot of work…

7

ok,

while waiting I had a little play and tested my first idea on this.

declare your hype variable as a empty array

var hype = [];

now change
hype = hypeDocument.documentName();

to

hype.push(hypeDocument.documentName());

We use push so we now have an array of names for each hypeDocument on the page.

Change

  $('.hype_page_no').click(function () {
        if (typeof HYPE !== 'undefined') {
            HYPE.documents[hype].startTimelineNamed('stopAudio');
            HYPE.documents[hype].pauseTimelineNamed('Main Timeline');
        }
        window.scrollTo(0, 0);
    });

to

$(".hype_page_no").click(function () {
	 
    if (typeof HYPE !== 'undefined') {
    
    hype.forEach( function(item, index){
        HYPE.documents[item].startTimelineNamed('stopAudio');
        HYPE.documents[item].pauseTimelineNamed('Main Timeline');
        });
        
    }
    window.scrollTo(0, 0);
});

We use a forEach loop to iterate over each item in the array and use it’s value in the code

1 Like
8

Hi Mark,

Sorry my reply is so hideously late, this topic actually disappeared for me for quite some time and so I thought it had gotten deleted, it’s now just reappeared for some reason.

Yes, I did look at your suggestion - much better thank you :smiley:
And the forEach loop is working perfectly!

1 Like