Audio Embed Tests

Here is the recording in brackets with width set to 500. Note that the width measurement doesn’t work … it automatically expands to 100% of the content area:

But, it turns out that it is possible to control the width of the player by wrapping it in div tags and adding “padding-right”:

Unless bottom padding is added, text that immediately follows the player will display right below the player, which allows the text to be used as a caption.


Here is the same recording placed in the text field as a bare url that points to the location of the mp3. Note that the width of 100% of the content area, and no auto play:


Below would be a nice way to present several additional recordings for a species-page. It is perhaps a nicer delivery than using tooltips for sounds because it’s immediately obvious that sounds are there to be played, with super easy access. Width can be adjusted, of course, using padding-right:

What happens if we type some text in here; does it respond to the padding right, causing it to drop down before reaching the right edge of the page?

Courtship Song of Fall Field Cricket:

Courtship Song of Blah Blah Cricket:

Courtship Song of Blow Blow Cricket:

Courtship Song of Blom Blom Cricket:

Courtship Song of Bliz Bliz Cricket:

Courtship Song of Bloop Bloop Cricket:

Courtship Song of Blew Blew Cricket:

Here I will try to center a player using a div and a class I created to center the player, along with specifying a 500px width so that I can see if it’s centering or not: