HTML5 Audio Player iBloc

The HTML5 Audio Player iBloc is a highly customizable audio player designed for mobile devices (e.g., iPhone, iPad and Android) and modern web browsers that support the HTML5 audio tag (see below for a list of supported browsers).

Current Version: 1.0
Supported iRise Studio Versions: 8.9 – 8.12
Supported Browsers: IE 9.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

  • Plays externally hosted audio files of any size or length.
  • Supports any combination of MP3, Ogg, and WAV formats.
  • Can display or hide native device or browser audio controls.
  • Can optionally loop audio track and auto-start* on load.
  • Supports custom controls using standard iRise widgets, including play, pause, mute/unmute*, volume up/down*, restart, skip back/forward, rewind and fast forward.
  • Supports custom audio seek and volume slider* controls.
  • Can display elapsed and remaining time in standard iRise text widgets.
  • Fires custom events on play, on pause and on video ended, which can trigger standard iRise Actions and Action iBlocs.
* Auto-start and custom volume controls are not supported by iOS or Android mobile devices.

How do I use it?

  1. Drag the iBloc onto the page.
  2. Enter one or more URLs of MP3, Ogg, or WAV audio files. The URL must be a direct link to an audio file (see Advanced tips & tricks below for some video hosting options).
  3. Any combination of audio formats can be used, but at least one must be entered, or no audio will play. You should use the format(s) supported by your target device(s) and/or browser(s). (iOS devices or IE 9+ : MP3; Firefox : Ogg or WAV; Safari : MP3 or WAV; Android devices or Chrome : any format).
  4. Your audio file will play with standard browser/device controls by default. You can hide the standard controls, set other options, create custom buttons, sliders and more in the other sub-panels of the Properties panel.

Tips & Tricks

  • You can host your audio file(s) on an iRise Definition Center server if you have access to one. Simply place your files in this directory (or create a subdirectory): “C:\iRise\DefCenter\Tomcat\webapps\ROOT\” (replace ‘C’ with the letter of the drive where iRise is installed). The URL of your audio will be “http://[your def ctr domain name]/[subdirectory (optional)]/“.
  • There are some free (and many low-cost) services on the web that can host your files. One that we have tested and works is File Den. Just make sure that the service you use supports direct linking to files (no download pages or dynamic query-based URLs will work). These services generally have storage and bandwidth limits, so be cognizant of your file sizes.
  • When you create audio seek or volume sliders, the section that you use for the slider will become the slider bar, so adjust the height, width, and formatting of the section to get the appearance that you want. The slider handle and the area to the left (or below) the handle can be styled using the properties in the slider sub-panels of the Properties panel.

Feel free to download this and any of our free iBlocs here, and please tell us what you think.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2013 - id8    Privacy Policy