No audio tag present in html

audio

(Jyoten Patel) #1

I have a hype document with audio that has been automatically started in the timeline. I am trying to mute the audio using a javascript in the parent container but I don’t see the tag when the page is served via a web server. I only see it when I open the page by double clicking on the html file.

I’m guessing because it’s using WebAudio API when being served from the server. So how do I do things like audio.muted = true through javascript?
I’m including a small sample I created: sample.zip (324.7 KB)


#2

Hi Jyoten!

Attached is “Test_muted.hype”. I’ve adjusted your original set-up because I could not figure out how to do it as is (via a Timeline Action).

So instead of the Timeline firing the playing of the sound (which I’ve eliminated) I put that in a function named “audioSetup” - triggered by the “On Scene Load” handler. Sounds identical.

window.audio = new Audio('${resourcesFolderName}/music.mp3');
audio.play();

Note this is a global, should be able to call it from anywhere.

The mute function is called with "audioMuted"
audio.muted = true;
which in my example is triggered by clicking on the “Mute” button on the HTML page.

Test_muted.hype.zip (125.1 KB)


(Jyoten Patel) #3

Hey Jim,

Thanks for answering. Yes, this works, however I have a ton of hype files that already have timeline action and I really don’t want to go through each one and manually update it, regenerate the html and upload it back to my server so I am looking for something that works via the timeline. If I can get to the audio context and source that are generated with the webaudio api that the timeline uses then I have an automated way to update the javascript I’m using, fix the audio and add a mute button to all the documents otherwise i’m stuck with the manual way. I’ll keep trying to see what else I can come up with but otherwise I can use this method you have given me.


(Hans-Gerd Claßen) #4

hi jim,
hype does not provide any function within its Javascript API to control audios managed by its behaviours.
@Daniel This’d be a nice featurerequest :slight_smile:

well … as a result you won’t know if actually audiotag or web audio api is used to play the sound.

So best / easiest way would be to manage it yourself (like @JimScott mentioned ) or hope for some insight of the hypeteam :wink:

or: create another timeline which starts behaviour to stop audio. you can start / control this timeline from your parent container …


(Hans-Gerd Claßen) #5

as a hack:
WebAudio Api will start xmlHTTPrequest. so you can create a prototype for send and apply a callbackfunction.
this object will include responseURL which is the mp3-filepath …

_send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

var callback = this.onreadystatechange;
this.onreadystatechange = function() {             
if (this.readyState == 4) {
console.log(this.responseURL)
}
callback.apply(this, arguments);
}
    _send.apply(this, arguments);
}

(Mark Hunte) #6

I am assume this goes in a on load.

But did you actually get anything with it ? ( I am probably being thick here )


(Hans-Gerd Claßen) #7

has to be inserted before load … head :slight_smile:
it’s not been my idea …


(Mark Hunte) #8

Thanks.

I tried both ways. Got errors in the Head.
I am sure it should work as I have seen some other examples suggesting this kind of thing.
oh well… sure someone will figure it out :slight_smile:


(Hans-Gerd Claßen) #9

guess it been just over the top :wink:

_send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

this.onreadystatechange = function() {             
if (this.readyState == 4) {
console.log(this)
}
}
    _send.apply(this, arguments);
}

(Jyoten Patel) #11

@h_classen, this will only tell us if there is an audio file being requested. There is still no way to get the audio context so no way to mute it correct?


(Hans-Gerd Claßen) #12

this is right