Sound at pressing Button

You can use a flash mp3 player or just any html sound players you want. Check this out for instance http://www.labnol.org/internet/design...

You can create a folder with an html file and the sound file inside. Then write in the html just the necessary code to play the sound file. Finally use the widget called HTML Website to embed that folder.

Thanks. Can the folder be placed anywhere on the computer or should it be in a specific location?

"Then write in the html just the necessary code to play the sound file"...is this any particular HTML code that will display an audio player. How to you use an Audio player that has Java Script?

Thanks

The folder is copied inside the .vp file. So you don't need to have it in any place in your computer.

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.

Check this https://www.justinmind.com/community... that way you won't need to upload your mp3 anywhere.

Can you send your prototype (or at least the piece of it that has the sound) to jim.support at justinmind.com please?

Is this PDF trick still working?

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

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

Sound at pressing button

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.

You can embed any HTML code into your prototype using the HTML widget. You can try with the example you have at the end of this tutorial: http://www.html5rocks.com/en/tutorial...

OK, I will give that a try.

Will the program embed my sounds in the .vp file or will I need to provide hard coded links to the files on the internet? I am assuming I will need to provide hard coded links?

Would it be possible to add a sound file as a pdf object and then somehow reference it from html? I could set the pdf object to not visible. If I could reference it from the html would I just put the name and no path or would I need to supply a path?

Take a look at these two threads:

Potential method to play sounds on button press

Sound plays even when hidden

Take a look at these threads:

https://www.justinmind.com/community...

https://www.justinmind.com/community...

https://www.justinmind.com/community...

This is an iPad app prototype so no Flash.

Want to trigger an mp3 file with a Tap Screen Event.

Is that possible?

Don't want to write code or add an audio player to the prototype.

Specifically using Prototyper Pro to avoid writing code.

I'm probably not understanding the original reply.

Is there a built-in event in the program that will trigger an mp3 file?

Unfortunately, there is no built-in event you can use to trigger an mp3 file. You have to use the work around from the links I gave you.

Hi Francis,

Justinmind doesn't have the sound widget but you can take a look to this topic: http://www.justinmind.com/community/topic/sound_plays_even_when_hidden

I hope it helps you.

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>

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>

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>

hello.I am working on just in mind and the audio file plays just fine when i simulate it in my laptop but when i click on "view device" the audio file does not surpasses the loading.

It shows a play button with the text Loading beside it.

How can i solve this?

Hi Gunjan,

Are you playing a locally stored audio file? As they can't be included on the prototype, when the prototype is not simulated on your local computer it can lead to problems.

A workaround would be to upload the sound to youtube and play it from there using the HTML widget.

Best,

Lidia

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"?

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>

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 ;

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

Answered through customer support portal.

Best,

Sonia Durán

Possible to post the solution here as well for public consumption?

Hi Eric,

Unfortunately, Prototyper only allows hosting for images. Widgets to upload video and audio are on top of developmen'ts team new features to be implemented, however as a workaround you can take a look at these list of discussions about the same topic to get some ideas:

https://www.justinmind.com/community...

https://www.justinmind.com/community...

Best,

Sonia Durán

Hi there,

Unfortunately this is not a simple addition, but we're working on implementing this feature. Check out these threads to view some solutions people have come up with as a workaround:

https://www.justinmind.com/community...

https://www.justinmind.com/community...

Best,

Danielle

Appreciate the information but the provided links seem to not get to a solution.

I have an html snippet that works well but I have to hard code the audio file link. Is there a way to add a file to the project and have a relative link to it? If this was possible than I could implement the audio. Otherwise I run into issues with CORS if I host it, when simulating locally.

Hi Sergio,

You could simulate an alarm dialog and some sound by using the HTML widget and embedding a source of the sound. Unfortunately it won't be possible to create a vibration.

Best,

Danielle

the problem is, you cant connect html widget to another page

Hi,

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

Can you post a sample that shows how to embed sounds? I want to prototype an android app that plays different musical notes as you press keys and also shows the keys being depressed