Embedded audio player how-to?

Elements Audio & Video
2

To add an audio element to Hype, you would

  1. Create a rectangle (Insert > Rectangle)
  2. Select Edit > Edit Inner HTML
  3. Insert the code in the box.

If you drag an audio element into your resources library (or perhaps a pair of file.mp3 and file.ogg), then you would get an audio group generated in your resource library. You can then create a standard HTML5 audio element by inserting this code:

<audio id="myAudio" width="200" controls="controls" preload="auto">
    <source src="${resourcesFolderName}/file.mp3" type="audio/mpeg">  
    <source src="${resourcesFolderName}/file.ogg" type="audio/ogg">  
</audio>

This code tells the browser: I want the element to be 200 pixels wide, I want the user to be presented with play / pause / seek options, and I also would like the browser to preload as much of the audio as possible. The two sources are chosen by the browser based on what the browser supports. MP3 should be fine for nearly all browsers.

The ${resourcesFolderName} text is a variable that is replaced with the documentname.hyperesources folder name at export time to ensure that the file can be located.

The myAudio ID gives you the option to control this audio from outside of the audio element and is optional.