• 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 989 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 (24.3K 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

  • What is Configuration Management February 5, 2023
  • What is ChatGPT? February 3, 2023
  • Zebronics Pixaplay 16 : Entry Level Movie Projector Review February 2, 2023
  • What is Voice User Interface (VUI) January 31, 2023
  • Proxy Server: Design Pattern in Programming January 30, 2023

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, February 5, 2023, https://thecustomizewindows.com/2014/02/html5-audio-tag-and-embedding-mp3-in-wordpress-post/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

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

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

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

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT