PB oEmbed HTML5 Audio – with Cache Support

This plugins adds possibility to place audio files into posts and pages using the oEmbed technology used by WordPress for other purposes (YouTube videos etc). Audio files are embeded using HTML5 audio tag, with Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format (Internet Explorer up to version 8.0, Firefox and Opera).

To put audio file into a post, simply enter the URL link to the audio file as separate paragraph. The plugin will convert it into the player on the page. See screenshots.

This is a special version of oEmbed HTML5 Audio: It is completely rewritten to support Cache Systems like WP Super Cache or W3 Total Cache and I’ve added some new Features.

Key Features

• oEmbed support for mp3, ogg and wav audio files
• HTML5 Audio Shortcode (supports this functions: autoplay, loop, preload, controls and flash fallback)
• Easy to use Shortcode-Generator
• Compatible with Cache-Systems like WP Super Cache or W3 Total Cache
• Flash Fallback

Auf der Suche nach einer deutschsprachigen Anleitung?

Eine deutschsprachige Anleitung zu diesem Plugin ist auf meinem Blog zu finden:
WordPress und HTML5 Audio Support – Plugin

The new Shortcode:

I’ve added a simple Shortcode to give you the full control of your HTML5 Audio:

[audio id="your-css-id" class="pb-html5-audio-element" mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]

All Parameters are optional, but you need to specify at least one Audio Source: mp3, ogg or wav.

Defaults:

• id (optional, will be auto generated by the plugin if you not provide an ID)
• class = pb-html5-audio-element
• autoplay = off
• loop = off
• preload = on
• controls = on
• flash_fallback = on
• hidden = off

Please note: The Flash Fallback works only with mp3 files!

Since version 2.3 you can use the Generator below your Editor in Posts and Pages.

Use the Shortcode in your Theme

If you want to place an Audio-Tag Player in your Theme, you can use the Shortcode via PHP:

Tested support in browsers:

• Google Chrome 14: MP3, OGG, WAV – native HTML5
• Firefox 6: OGG, WAV – native HTML5; MP3 – Flash-based backup player
• Opera 11: OGG, WAV – native HTML5; MP3 – Flash-based backup player
• Internet Explorer 8: MP3 – Flash-based backup player; OGG, WAV – not supported
• Internet Explorer 9: MP3 – native HTML5; OGG, WAV – not supported
• Safari: MP3 – Flash-based backup player; OGG, WAV – not supported

A complete list which Browser supports which format you can find here: HTML5 CSS3 Box – HTML5 Audio-Tag

If you have any questions or problems, you can ask me: Pascal Bajorat – Webdesigner / WordPress / WebDeveloper

Credits

• Developer: Pascal Bajorat

Translators:

• Spanish Translation by Andrew Kurtis – webhostinghub.com

Licence

GNU General Public License v.3 – http://www.gnu.org/licenses/gpl-3.0.html

HTML5 Audio Tag Shortcode:

I’ve added a simple Shortcode to give you the full control of your HTML5 Audio:

[audio id="your-css-id" class="pb-html5-audio-element" mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]

All Parameters are optional, but you need to specify at least one Audio Source: mp3, ogg or wav.

Defaults:

• id (optional, will be auto generated by the plugin if you not provide an ID)
• class = pb-html5-audio-element
• autoplay = off
• loop = off
• preload = on
• controls = on
• flash_fallback = on
• hidden = off

Since version 2.3 you can use the Generator below your Editor in Posts and Pages.

Use the Shortcode in your Theme

If you want to place an Audio-Tag Player in your Theme, you can use the Shortcode via PHP:

oEmbed HTML5 Audio

This plugins adds possibility to place audio files into posts and pages using the oEmbed technology used by WordPress for other purposes (YouTube videos etc). Audio files are embeded using HTML5 audio tag, with Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format (Internet Explorer up to version 8.0, Firefox and Opera).

To put audio file into a post, simply enter the URL link to the audio file as separate paragraph. The plugin will convert it into the player on the page. See screenshots.

1. Upload the full directory to wp-content/plugins
2. Activate plugin Tags Page in plugins administration
3. Now, if you place URL to audio file as separate paragraph into post or page, it will be converted into audio player in the browser.

1. 

   Just put URL to audio file into the post ...

2. 

   ... or use the [audio] Shortcode Generator

3. 

   This is how it looks in Google Chrome browser

4. 

   This is how it looks in Internet Explorer 9 browser

5. 

   If the browser does not support HTML5 and/or MP3 format, Flash based player is used

1.0

• Initial release.

1.1

• Google removed their MP3 Flash player from their website, so we include it in the plugin itself now (it’s still the same player)

2.0

• Now supports Cache-Systems like WP Super Cache and W3 Total Cache

2.1

• New Code Base – The Plugin is now completely OOP
• Added an [audio] Shortcode this will grant you access to the full power of the HTML5 Audio-Tag

2.2

• Improved the Flash Fallback Mechanism in the Audio-Tag Shortcode

2.3

• Added a Metabox-Generator for the [audio] Shortcode

2.3.1

• Fixed a little bug in the previously released Metabox-Generator
• l10n Localization
• Added german translation

2.4

• Added a Settings Page to configure the oEmbed defaults
• Fixed some Bugs

2.4.1

• Fixed some Bugs
• Flash Fallback now works with simple JavaScript and does not require jQuery

2.4.2

• Fixed some Bugs with the new WordPress native audio tag (shortcode conflict)

2.4.3

• Fixed a bug with the media upload in the shortcode generator (metabox)

2.4.4

• Added Spanish language files

2.5

• Added custom CSS ID Support
• Added custom CSS Class Support
• Improved some JavaScript Parts

2.5.1

• WordPress 4.0 Update

2.6

• Added “hidden” setting to the shortcode
• Fixed some Bugs