• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » HTML5 Audio Tag and Embedding MP3 in WordPress Post

By Abhishek Ghosh February 23, 2014 5:21 pm Updated on February 23, 2014

HTML5 Audio Tag and Embedding MP3 in WordPress Post

Advertisement

HTML5 Audio Tag Element Represents a Sound or an Audio Stream. Embedding MP3 Such as Own Podcast in WordPress Single Even One Post is Easy Without any Plugin. Earlier, we discussed about HTML5 Vocabulary and Interfaces. HTML5 provides a standard for playing audio files. Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files had to be played with a WordPress plugin (like flash). However, different browsers supported different plug-ins. HTML5 defined a new <audio> element which specifies a standard way to embed an audio file on a web page. So, this is true that; we can include HTML5 Audio Tag Element and Provide some way to Play an Audio Stream within a single Post.

There is, at least one WordPress Plugin named oEmbed HTML5 audio plugin which is intended to add audio file on WordPress Post. In this case, one need to click on Add Media button to upload audio file from your computer. One can upload files in mp3, ogg, and wav formats. Once you have uploaded the file, copy file location and paste raw URL in your post. The plugin will use HTML5 audio tag  element to automatically embed audio file from your URL.  Currently, Firefox does not support oEmbed HTML5 audio for MP3 files so the plugin falls back to a flash player instead of HTML5 when it detects Firefox. Google Chrome and Opera supports all the features specified in HTML5 Audio Tag Element, unfortunately; we need an unified looking Player on all these Browsers.

Advertisement

---

 

HTML5 Audio Tag Element and Why We Need an Extra Audio Player in WordPress

 

Theoretically, this block of code will work fine to have an Audio Player on HTML5 WebPages :

Working example :

Your browser does not support the audio tag.

But, in real, we need some working HTML5 Javascript Based Audio Player to give our readers an option to Play Audio file as it is required to have something that works on every possible web browser on every possible devices.

This indeed, quite closer to this fact – we could host the above code, but we have used Github Gist. For block of codes; NOT ALL, really works great with self hosting and using a syntax highlighter.

WordPress Plugin is not a good option as the Javascripts will be included on all the Post Pages on WordPress – we do not need the Audio Player on all Pages or Posts. Another way is to include a Third Party Player like from SoundCloud – practically, we have told kind of that way with Kaltura Player.

HTML5 Audio Tag and Embedding MP3 in WordPress Post

 

HTML5 Audio Tag Element and Why We Need an Extra Audio Player in WordPress

 

By now, we know how to use WP Enqueue Script For WordPress Themes. As all posts has an id like ( post=722 ) we can conditionally load them, simply move your functional code to theme’s functions.php file and wrap the function contents in an if ( is_page( ‘page-with-form’ ) ) conditional argument.

Now, we need a nice, neat Player. Audio.js is what we want :

Vim
1
https://github.com/kolber/audiojs

We talked about another Audio player on this post – Cloud Files Hosted Music Player of Your Own. You can (as a last effort) iframe your own such self hosted player on plain HTML page.

Tagged With how to embed html 5 in wordpress , wordpress mp3 embed code

This Article Has Been Shared 277 Times!

Facebook Twitter Pinterest
Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to HTML5 Audio Tag and Embedding MP3 in WordPress Post

  • Icon-Font : Using with WordPress

    Icon-Font is Icons but is in Font format – that simply means, what you used commonly as image and increased your page loading time can be reduced and made cool.

  • Create Own Icon Font From Image Icons

    Create Own Icon Font From Image Icons – Here is How to Change Any Type of Images to Icon Font and Use With CSS. Base64 Encoding Can Result in Faster WebPage Loading.

  • Blurred Text of Content Area With jQuery and HTML5

    Blurred Text of Content Area is Required to Force the Reader to Login to Perform Some Action. Here is How to Get Blurred Text Like Quora.

  • Fix Sudden Error Establishing a Database Connection WordPress

    Fix Sudden Error Establishing a Database Connection WordPress By Following Our Logical Flow Chart Without Taking Much Sudden Headache.

  • Add Post Thumbnail to RSS Feed in WordPress

    Add Post Thumbnail to RSS Feed in WordPress in Very Easy Steps to Make Your Feed and FeedBurner Delivered Newsletters More Interesting.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (22.1K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • The Future Of Serverless: The Load-Intensive Workload Case May 25, 2022
  • Cutting Out The Coding: Serverless Computing In Action May 24, 2022
  • Types of Blackjack Variants: Discover the Different Versions of the Game May 23, 2022
  • How Cloud, Robotics And Sensor Technologies Are Changing The Business Landscape May 23, 2022
  • Modernizing Your Business With a Hybrid Cloud Strategy May 22, 2022

About This Article

Cite this article as: Abhishek Ghosh, "HTML5 Audio Tag and Embedding MP3 in WordPress Post," in The Customize Windows, February 23, 2014, May 25, 2022, https://thecustomizewindows.com/2014/02/html5-audio-tag-and-embedding-mp3-in-wordpress-post/.

Source:The Customize Windows, JiMA.in

This website uses cookies. If you do not want to allow us to use cookies and/or non-personalized Ads, kindly clear browser cookies after closing this webpage.

Read Privacy Policy.

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2022 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy