It works locally! The trick was to generate HTML files. Thanks again for the rockin response!
j
(Answered) Adding Sound (audio, music)
Yup, preview will not work with local files. When you hit preview, Axure is actually running a lightweight server to serve the content locally and this is impacted by browser security restrictions that prevent sites from loading files from your local file system. When you run the prototype from your disk this isnāt an issue.
Soā¦ the tips above work great as long as I demo the resulting HTML files on the same computer that I created them on. However, if I move the HTML files to another device, the link to the sound file is broken. I tried to edit the path but it doesnāt seem to accept the change. Iām attempting to change the HTML file and tried doing within Chrome by editing and saving it.
Any thoughts on how I can do this? I also tried putting the final destination path into the Axure path before making HTML files, unfortunately this didnāt work. And just to make things interesting, Iām creating the files on a Mac and running the demo on a Windows device.
Thanks in advance.
John
OK, before anything else, I have to ask: did you copy the sound file too?
Assuming you probably did, try using a relative path to the file as the paths will look different on Windows vs. Mac. For example, if you put the sound file in the same folder as the HTML document, make the path ā./soundfile.mp3ā
I donāt think you can edit the files directly in Chrome (maybe Iām wrong, never tried). You can modify them in memory in the browser but I donāt think it will save the changes to the files on the disk. Just use a plain text editor. On Mac Iād recommend Sublime Text, on Windows try Notepad++ or Notepad and TextEdit respectively if you donāt want to download anything. Just make sure youāre not editing as rich text.
Lastly, any changes you make the generated HTML files will be overwritten when you generate them again from Axure. So if youāre editing the generated files, youāll need to make that change every time you re-generate them.
Hey, I figured it out. It was a silly syntax thing (direction of the ā/ā). I can make it work within my virtual PC and will test it on a standalone device tomorrow. I like the idea of the relative path and will test that too.
Thanks Nathan!
Cheers
John
Hi again
I can successfully play a sound file triggered by loading a page. However, I now have multiple audio player setups.
I have a dynamic panel with several states, two of these states contain separate audio players and linked sound files. No matter what Iāve tried, it will only play the same sound in either state. Iāve tried adding conditions onLoad and elsewhere. The files play correctly outside of Axure and Iāve triple checked the naming used. The audio players use different names as well.
Anyone ever encounter this issue?
Thanks in advance
John
Update
I am able to play two different sounds using two audio players as long as they are not within a dynamic panel. They also work if they are within different dynamic panels. If each audio player is in a unique state of the same dynamic panel, then I only get one audio file to play regardless of what the case is set to. Interestingly, the layer positioning determines which audio file plays. The lowest one takes precedence.
Iāve got the sounds to play as expected but now they donāt play automatically onLoad. Working on a fix for that.
Cheers
John
Iāve been messing around with audio and video againā¦ so will boot this thread yet another time
Using mnearents method to load HTML5 audio directly, you can just keep adding audio streams to the page, then refer to their array position to control them. Combining this with Gregorās infamous JAVASCRIPT ENGINE, I can play, pause and reload multiple audio files simultaneously. Have a look.
Audio-Array.rp (107 KB)
John, you can copy the code from the āLoad Audio Filesā button to the OnPageLoad event and it will load files automatically --just be sure to wait 500 ms after invoking the JAVASCRIPT ENGINE before calling any javascript. I havenāt tried loading the audio controls to dynamic panel states, but it should work --the audio streams are attached to the page so should be available from any widget or div on that page. I have loaded videos to separate dynamic panel states and that works fine.
Now I need to add in time codes and a scrubbable timelineā¦
How to make a button that plays sound when pressed?
Adding Audio files and controlling playback?
Embedded Audio / Stop, Pause, Start
Nested Repeater Alternative?
Please excuse me but I need to let out a litle rant. These workarounds lead to the purpose of this program to absurdity. It is ridiculous, that there is this discussion since 2012 and there is stil no audio feature in Axure. Instead of thinking about javascrip workarounds, you could just build in this feature. Iām thinking about presentig my UI for an illiterate target group in powerpoint, that might be faster.
I use prototyping tools because I canāt write code and donāt want to ask the developers for building dummies.
Hi, Iāve placed a local file I want to be played within the projectās directory. In the inline frame I added the fileās local path (C:\Usersā¦\filename.wav) and it plays the audio file after generating html files for the project.
However, as discussed here above, it doesnāt work when I export the project in attempt to run it on a different device. When generating all other html files, Axure doesnāt generate an html file from the local file.
What should I do to make an audio file become an html file? so that Iāll be able to modify the rp file and link to that generated html file directly instead of using local path to the audio file?
Thanks!
Inbar
Hi Inbar,
The best way to render the audio/video file across different machines is to upload it to a public file-sharing service, e.g. YouTube, which will give you an embedded share-able URL that youāll be able to target with the iframe. Having a publicly accessible audio file should ensure that you get consistent results when viewing the project on a different device, as long as that device has an internet connection.
If youād rather keep the audio file private, what will help is to put the file directly into the projectās generated HTML folder and then edit the target frame URL as simply āfilename.wavā or ā./filename.wavā, so that the local path of your machine is not in the target frame URL, e.g.:
When viewing the prototype on a different device, extract the ZIP containing the generated HTML files and double-click on an HTML file to view the project - there shouldnāt be a need to update the audio file target URL on the new device. When updating your project, however, youāll want to make sure to update the generated HTML files as well (āPublish > Regenerate Current Page to HTMLā).
YouTube (and Vimeo) have changed what and how they allow access to content. You have to go through their API, which works differently from methods described in this thread. You can search āYouTubeā on this forum to get more info.
Iāve found the Internet Archive is a good place to freely host audio and video files, as well as get tons of content for just about anything. You can get a URL which will quickly load your sound file, and choose to make it publicly available or not.
Another approach Iāve used for local-only files called from Axure prototypes is to put them in a folder at same level as or one folder above my HTML folder, e.g., named āsoundsā. Then, just zip up that folder with your HTML folder and port it anywhere. In this way, you can keep updating and publishing your Axure prototype without having to keep moving files around, as well as reuse those sound files in other prototypes.
Pro Tip: Itās best to use relative URLs in your Axure calls, e.g., āā¦/sounds/myfile.mp3ā instead of āC:\otherfolder\sounds\myfile.mp3ā to make it more portable.
Method for embedding sound files into your RP document