example of how to play a sound file upon loading a page?

greg shared this question 6 years ago
Answered

Is there an example that shows how to play a sound file when loading a page (or clicking a button)? Conversely, how would you stop a sound file when exiting a page via a button click?

Best Answer
photo

Hi all,


We're happy to inform you that Justinmind (version 7.9) now lets you embed .wav and .mp3 audio files in your prototypes.


This is a great new feature for adding rich, dynamic content to your interactive designs, and will give your prototypes an even more realistic edge.


Check it out for yourself here.


Best,


Sonia Durán

Comments (11)

photo
1

You can use the HTML widget and write the HTML code of a sound player. Then you can control if it sounds or not just showing or hiding that html widget. There is a trick you can do too. You can place a PDF widget instead, then change the default pdf. When the file explorer shows up write *.*. That will allow you to select any kind of file like, for instance, a MP3 file. Then just hide or show that widget to control when to play or stop playing that sound.

photo
1

Is this PDF trick still working?


If you place an html with tag on autoplay, it sounds whereas is showing or not...

photo
1

I meant an HTML with "audio" tag, the system just ate my HTML

photo
1

Yeah, I have already read that thread, but, do you have an example on how to reference from an image to the player inside of an HTML widget to do the .play() action? I don't have any prototype to send to you because all I've tried is creating an image, creating an html widget with the HTML5 "audio" code, and tried to make it play with no luck...


Thanks.

photo
1

I just spent an entire night trying to figure this out and here's what I have. Works well! Just provide any image. And I placed this HTML object on top of whatever I want clicked. When running, this object becomes transparent giving the feel of a click on the underlying object. Hope this helps (unless you've figured it out already a year ago :).


a:link {


color:#FFFFFF;


background-color:transparent;


text-decoration:none;


}


img {


opacity: 0;


}


<a rel="nofollow"> </a>

photo
1

I just tried your suggestion, but I can't figure out how to properly define the link. How would you insert the audio file "D:Audioexample.mp3"?

photo
1

Here are the steps.


1. Create a folder on your local drive


2. Add the html that i provided below, give it any name


3. Add the mp3 of the audio into this folder


4. Create a transparent image for the resolution you want, call it transparent_image.png and put it in the folder as well


5. Add "HTML Website" control to your screen


6. Choose this folder as the source


7. Choose the html file name as the starting point


The reason i chose transparent background is because i didn't want this control to show. During my demos, I click on the screen to play the audio when am speaking, so the person isn't paying attention to you clicking on the screen and it looks like the audio autoplayed on load.


Try to simulate now, it should work. Keep in mind that android doesn't allow auto play of music on page load, so you have to click the image control to play


HTML content ...


a:link {


color:#FFFFFF;


background-color:transparent;


text-decoration:none;


}


img {


opacity: 0;


}


<a rel="nofollow">


</a>

photo
1

Looks like the html content is actually being parsed here and being displayed ... so let me try this again ... am replacing < > with a ; ...


; html ;


; body ;


; style ;


a:link {


color:#FFFFFF;


background-color:transparent;


text-decoration:none;


}


img {


opacity: 0;


}


; /style ;


; a onclick="details.play()" ;


; audio id="details" src="my_audio.mp3" autoplay ; ;/audio ;


; img src="transparent_image.png"/ ; ;/a ;


; /body ;


; /html ;

photo
1

There is a even easier way to do this:


html


body


audio controls autoplay preload="none" style="width:400px; visibility:hidden" id="details"


source src="youraudio.mp3" type="audio/mp4" />


/audio


/body


/html

photo
1

Hi all,


We're happy to inform you that Justinmind (version 7.9) now lets you embed .wav and .mp3 audio files in your prototypes.


This is a great new feature for adding rich, dynamic content to your interactive designs, and will give your prototypes an even more realistic edge.


Check it out for yourself here.


Best,


Sonia Durán