The tag here is still "BackgroundMusic", so the file can be stopped at the next wave's end.
The "Play (by name)" action takes several parameters: the name of the file (as a text field in which you can add variables and expressions), the folder the file is supposed to be in (either "Sounds" or "Music" here it is the "Music" folder) and a tag, as the "regular" "Play" action. Moreover, in this very example, the condition "System: Trigger once" allows to play the sound only one time, and not every tick that the key is down (which would result in multiple samples being played on top of each other and ultimately a saturating cacophony). When the player presses on the "UP" key and that the global variable "Sound" is equal to 1, a sound is played.
#HTML5 AUDIO EVENTS CODE#
When it is 1 it means that sound/music is on, when it is 0 music/sound is off.Īnd so, anywhere in the code that an audio action is needed, you might already have noticed a condition "System: Sound = 1" is used (often as sub event).įor example, in "esGame" event 4. ° The user can choose if he wants sounds or not (turn it on/off)Ī global variable "Sound" (in "esScore") is either of value 0 or 1. They are downloaded like sprites.īackground musics are streamed from where your project is hosted and must be imported in the music folder. Remember that sounds can be preloaded and should be small/quick files.
#HTML5 AUDIO EVENTS HOW TO#
Var pct = Math.floor(100 * audios_status.current / e.target.duration) įor (var j in audios_status.Be sure to check " Adding sound - A beginner's guide" to learn how to add sounds and musics in C2 that can be used with the "Audio" object. We just want to send the percent events once Let's set the save the current player's audio time in our status objectĪudios_status.current = Math.round(e.target.currentTime) We're using for the % of the audio played. This event type is sent everytime the player updated it's current time, This is the funcion that is gonna handle the event sent by the player listeners We're going to save our players status on this object. This is gonna our percent buckets ( 10%-90% ) Let's wrap everything inside a function so variables are not defined as globals This listener is based on David Vallejo's HTML5 video listener, /tracking-html5-videos-gtm/ So, the final result of the HTML5 audio listener for Google Tag Manager is this: But to keep things tidy and to have the proper naming convention, I changed more words (for example, I’ve replaced all other “video” words in the code and changed it to “audio”). That is the minimum you need to do in order to adapt the listener to HTML5 audio. So that one word that we need to change is video. If we go back to the MDN’s documentation about media events, you’ll see that those interactions are supported by and elements. It means that the code is looking for elements that are using the HTML tag and will start listening to their events. Spot this line: var videos = document.getElementsByTagName('video') Since there are no numbers of code lines, you should be looking somewhere at 60% mark of his code.
Let’s take a quick look at David’s listener code. However, to fully understand the concept of audio tracking, I recommend doing both: reading this article and watching the tutorial. If you prefer video tutorials instead, you can watch a video here.
0 kommentar(er)
