1
The introduction of the HTML5 spec introduced new tags for presenting media on a webpage; the <audio> and <video> tags, rendering the <object> tag no longer fit for video and audio streaming.
These new tags have made it considerably easier to add rich media content to your design, and in today’s video tutorial, I’ll be talking through the following features which make HTML5’s media tags so flexible:
Using HTML5 audio tags to play an audio track on load; wrangling HTML5’s more complex parameters, such as controls and autoplay to create a fully-featured media player in less time than an average song length; the first steps to creating your very own custom-built media player to fit in with your own web design projects.
This is part one of a two part tutorial, and by the end of it, you’ll know how to use the power of jQuery and <audio> tags to create a basic music player. In the following video, we’ll be adding a whole bunch of new features; like album art and meta tags, too!
Have you featured HTML5 audio in a project? How does HTML5 audio compare with older options? Let us know your thoughts in the comments.
Featured image/thumbnail, sound image via Shutterstock.
A Closer Look at WordPress 6.7: “Rollins”
The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…
Why Responsive Design is Failing Modern Users
Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small…
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG of CO2 annually. Reducing your website’s carbon footprint is…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an experienced freelancer, a team of hardened developers, or a…
Rock Solid WordPress Security: Keeping Your Business Safe
WordPress is the web’s favourite CMS (content management system), renowned for its low-entry level and vast array of themes and plugins. WordPress’s open-source nature allows for endless flexibility, catering to…