Embedded audio player how-to?

Elements Audio & Video
1

Presenters.png715×403 170 KB
Hello everyone,

I've gone through the forum, youtube tutorials, etc., and -perhaps I'm missing it- this topic doesn't seem to have been addressed.

I have post-conference website built. We recorded video & audio for each presentation, which we want to make available for students & other researchers. For each session, we had three presenters. The website breaks down to a section for each session of presenters, as seen in the image below (huh. typed before I checked. No image linking in this forum? Hm. Dropbox link: Dropbox - Presenters.png - Simplify your life )

I'm presenting the presenter's name, title, affiliation; a still photo (which could be the still keyframe of an embedded video once we have that media available); and below, buttons for video (which may be supplanted by the aforementioned), audio (here is the crux of my question) and their PowerPoint presentation.

What I'm trying to do is find a way to make the audio button be an embedded audio player for the MP3 (and OGG and WAV) files.

I tried using Hype's mouseclick - triggered Play feature, but you can't shut it up once it's started (no pause control). I had audio triggered by mouseover at one point but ended up with three audio playbacks overlapping.

I think the answer is to call a javascript from the mouseclick... BUT I've gone through the documentation, including the advanced control of audio & video elements, and this section has me a wee bit stumped:

All you need to do is create a small snippet of Javascript which will run when you choose. First, add an ID to your audio element like the text 'lionroar' below:

> <audio controls="controls" height="50" id="lionroar" preload="auto" width="300">
> <source src="AUDIO.MP3"type="audio/mpeg"></source>
> <source src="AUDIO.OGG"type="audio/ogg"></source>
> </audio>

Here's where my ignorance of all things Javascript comes in: WHERE do I create that snippet? Does it go into an HTML widget? Into the code of the page? Into a new Javascript element accessed under Mouseclick?

Yeah, I know, I need to do a Javascript intro.... I would like a little more detail in Daniel's section on audio in the tutorials :slight_smile: Maybe a screenshot or two as well....

Or... is there an HTML5 audio player I can just drop into a widget, and point to the audio files I've uploaded to the server?

Thanks in advance for advice and tips, and for forgiving my lack of knowledge on the topic.

Cheers,
Mark

Presenters.png715×403 170 KB

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.

3

Thanks, Daniel. That helps. The missing step was the insertion of a rectangle to act as the “host” element, whereas my interpretation of the instructions were …well… off.

I’m purposefully not keeping my audio files within the Resource Library (instead referencing as external) since re-uploading the .hyperesources folder with a dozen 30MB to 80MB audio files gets a bit tiresome after awhile. :slight_smile:

I perhaps am using Hype for not it’s fully intended use - i.e., generating the HTML5 code of a complete functioning site

Thanks

4

One tiny little stumbling block.

The code:

<source src="${resourcesFolderName}/file.mp3" type="audio/mpeg">

I’ve dropped the mp3 and ogg files into a root-level directory of my site, "audio"
One of the audio files is “Acosta.mp3”

SO the code should be:

<source src="${audio}/Acosta.mp3" type="audio/mpeg">

…correct? or delete the parentheses? As-is, it doesn’t function.

5

It should be:

<source src="http://site.com/audio/Acosta.mp3" type="audio/mpeg">

...if it is under the 'audio' folder of your website. You can test that the full URL of the mp3 works beforehand. Just open http://example.com/audio/Acosta.mp3 (or whatever it is) in your browser and see if it loads.

6

Thanks, Daniel. It works now. The basic HTML5 player is a little too… basic… but for the moment it does the trick. I’ll explore options for something with a little more oomph, like a displayed track title and progress bar, once I round up all the other cats in this ranch. Cheers!

1 Like