1
This is part two of the HTML5 audio introduction video; if you haven’t watched it already, I recommend checking out part one to get up to speed!
Today, we’ll be working on our HTML5 audio player and adding some exciting functionality to really bring our HTML5 player to life. We’ll be using a method involving data attributes, which allow for easy access to custom values for each audio element, and that’s where our titles, artists and album art come in.
By the end of this tutorial, you’ll understand the following: “Tagging” your audio elements with custom data attributes; such as track title, artist and even album art; using jQuery to manipulate this information and display it on the page, with the flexibility to style it around your own designs.
I’ll also be demonstrating my player example, and talking through how to accomplish certain effects with your data; including displaying the album art as a glossy backdrop to your player.
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…