About the the audio control and the button's style

Elements Audio & Video
1

Hi, everyone! Now I have some trouble in using the audio feature.
I’ve used Hype to do H5(a popular form in China, just like the website with rich animation in mobile, most in Wechat).
An H5 project always has several pages. I often need to play the music when the first scene is loading, and add a music button in each page.
So I want to do that，when I start the H5, the music is playing, and no matter which page I click on the button the music can be paused, then I click on the button again, it played again.(also no matter which page).
I’d like to know how to do that~
Then the second is about the style of the button. We often use 2 images, A represent "play"and B represent “pause”, I want to do that, when the music is play, the imageB is showing and when I click on it to stop the music, the imageA is showing.

This file is based on a Hyper’s answer in a earlier question in the Forums, 【H5】musictest.zip (178.3 KB)
but I can’t finish the effect because of my poor coding knowledge…:sob:

Thanks for all of you!:relaxed::relaxed: I’m looking forward your help!:smile:
by the way, please forgive my poor English…:sob:

1 Like
2

backgroundMusic.hype.zip (182.6 KB)

happy music :slight_smile:

1 Like
3

@lydialmz

musictest_MHv1-JHS.hype.zip (191.2 KB)

Demo here.

This demo is based on @MarkHunte's example from another post of yours on the "Audio Mute" thread:

As with Hans' example above the "Play"~"Pause" button is a persistent symbol.

A change from Mark's example is I placed his "config()" function in the "Head HTML" - formerly he had this function triggered in the "On Scene Load" handler. This way when You go back to "Scene 1" the music is not triggered to play (again).

Additionally in this "Head HTML" section the volume is set as well as the looping.

1 Like
4

Wow! Thank you very very much!!!
You help me a lot lot lot！:blush::blush::blush:

2 Likes
5

Thank you very much Jim!
I’ve read the code try my best and it’s useful for my project!!:grin::grin:
It looks like that I really need to learn more about coding!

Thanks to all of you!!:blush::blush::blush:

2 Likes
6

Oh, I find another problem. Because the H5 is playing in mobile, but the IOS seems don’t allow the audio start playing. So when I played the project in IOS, the music couldn’t play at start.~

7

a userinteraction is needed …

8

Although this works. A odd thing I never encounter before was that the audio plays on loop in the Hype project.!!

Any way if you are getting this and find it :scream: then you can remove all the head code and reinstate the call to the config function on the first scene’s on scene load.
To stop the music restarting each time the scene loads use this code in the config.

if (!window.audio){
	window.audio = new Audio();
	window.audio.src = "${resourcesFolderName}/Blues-Loop.mp3";
 
	 
	audio.play();
	audio.volume = 1;
	audio.loop = true;
	}
1 Like