HTML5 Audio – Tips & Tricks

HTML5 Audio – Tips & Tricks

The “improvement” involved using the new HTML5 Audio API’s. I’ve been playing with HTML5 audio a little over the years with my passing interest in HTML5 based game engines. I already knew that HTML5 Audio was a bit on the dodgy side but I could get it to do what I wanted. Hopefully these tips will help other folks out.

I’ve often said that I think being a CEO who can code is like having a super power. Every now and then I like to use those powers for evil and recently added an easter egg to our new team page (see if you can find it).

The “improvement” involved using the new HTML5 Audio API’s. I’ve been playing with HTML5 audio a little over the years with my passing interest in HTML5 based game engines. I already knew that HTML5 Audio was a bit on the dodgy side but I could get it to do what I wanted. Hopefully these tips will help other folks out.

1. MP3 might not be enough

Firefox and Opera can play MP3 files, but they don’t have full support. This includes being able to set the position in the track. I got it all working in Chrome and then, being the experienced guy I am, tried it in Firefox. It just looped the start of the audio. Who knew different browsers would behave differently?!

In HTML5 you set the position like so:

var audio = document.getElementById("myAudioElement");
audio.currentTime = 5;

This would set the position to 5 seconds into the sound file. This does not work with MP3 files in Firefox or Opera.

How do you solve it? Easy: Multiple formats. Firefox will play ball with Ogg audio files. You can specify multiple audio files in the audio element as so:

<audio id="wc2">
  <source src="/sounds/music.ogg" type="audio/ogg">
  <source src="/sounds/music.mp3" type="audio/mpeg">
</audio>

The browser will use the type they best understand.

2. IIS doesn’t like Ogg by default.

This only applies to folks hosting with IIS as their web server. IIS won’t serve .ogg files until you tell it about the type. This is easy to do by adding the following to your web.config file:

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
  </staticContent>
</system.webServer>

This may also apply to Apache etc but I didn’t need to find out.

html5

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Learn html5 Full Crash Course | HTML5 Table/List and HTML5 Tags #04

@tkssharma Welcome to my channel Code Labs Javascript Learn Geek stuff [Angular, React, Redux, Nodejs, Web development, Docker, AWS, Vue JS, All about Javasc...

Working with Audio files - HTML5

How to configure audio files and various attributes in Html5? Working with audio files — Html5

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

HTML5 Semantics + How to build website using HTML5 Semantics

Welcome to HTML5 advanced tutorial series. Today we'll see about HTML5 semantic elements. A semantic element clearly describes its meaning to both the browser and the developer.