HTML5 Audio Player Not Working – in Firefox Web Browser

Another information technology problem in the world order. This time I was having problems with a third party website that I just recently converted from a WordPress content management system website to a hyper text markup language static website. One of the issues I noticed was that the HTML5 audio player not working in Mozilla Firefox web browser.

You see hyper text markup language version 5 has support for embedded media. You can use the built in <audio> tag to play audio. For example you could provide the playback of songs or even live radio.

However, to my chagrin the embedded HTML5 audio player not working problem only occurred in Mozilla Firefox web browser. As a web devoloper, webmaster, website owner, etc. it is always a good idea to test your websites functionality. Especially, in different web browsers, as currently not all web browsers support the same type of Internet technology.

I am not an exclusive web developer so I did not know that Mozilla Firefox web browser does actually natively support MP3 audio playback, at least at the time of this blog post creation. However, with this hyper text markup language code below, my live audio stream would not work in Mozilla Firefox web browser.

<audio controls>
<source src="http://xxxxxxxxxxxxxx.com:8000/" type="audio/mpeg">
</audio>

I add this line of code below, in addition to the code above, into the hyper text markup language web page that had an embedded audio player.


<source src="http://xxxxxxxxxxxxxx.com:8000/" type="audio/ogg">

I tested the web page with the embedded audio player and viola I could hear audio in Mozilla Firefox web browser. This Stack Overlow question response claims that both Mozilla Firefox and Opera web browsers prefer playing OGGing audio files instead of Moving Picture Experts Group audio layer 3 files also known as MP3. Ironically, Mozilla Firefox supports Moving Picture Experts Group audio layer 3 files in their official documentation.

Also, I did not independently verify whether or not the live streaming audio would work in Opera web browser. I have not installed or used Opera web browser in years. However, as a amateur web developer of sorts, I guess I had better install it one day for website testing purposes.

Interestingly enough Mozilla Firefox web browser supports these audio formats:

  • .wav
  • .wave
  • vorbis
  • .ogg
  • .opus
  • .oga
  • .ogv
  • .ogx
  • .spx
  • .flac
  • .mp3

I fixed another information technology HTML5 audio player not working quagmire, for now at least.

HTML5 Audio Player Not Working – in Firefox Web Browser Video Transcript

0:00:04.880,0:00:09.519
ultra video powder d

0:00:07.200,0:00:11.040
oh another quagmire now this one’s a

0:00:09.519,0:00:14.400
more personal quagmire

0:00:11.040,0:00:14.400
in information technology

0:00:14.639,0:00:19.199
i’m transitioning away from a content

0:00:17.119,0:00:22.240
management system known as wordpress

0:00:19.199,0:00:24.880
with that god-awful guten editor

0:00:22.240,0:00:27.119
to static html because i’ve had it i’ve

0:00:24.880,0:00:30.720
had it with content management systems

0:00:27.119,0:00:33.920
here’s a tip according to google

0:00:30.720,0:00:35.680
they prefer they recommend that you have

0:00:33.920,0:00:37.760
the fastest loading website

0:00:35.680,0:00:39.760
possible so you may not want to use

0:00:37.760,0:00:43.200
wordpress

0:00:39.760,0:00:45.120
it’s slow and that god i fucking hate

0:00:43.200,0:00:47.280
that goon editor i’ll just be blunt

0:00:45.120,0:00:48.399
and honest that’s one that’s the main

0:00:47.280,0:00:50.719
reason why

0:00:48.399,0:00:51.440
i’m converting anet computers.com to

0:00:50.719,0:00:53.440
static

0:00:51.440,0:00:55.039
hypertext markup language all right so

0:00:53.440,0:00:57.600
now this deals with another website

0:00:55.039,0:01:00.000
which i will not disclose

0:00:57.600,0:01:02.320
and i converted that website from that

0:01:00.000,0:01:06.720
god awful good editor and wordpress to

0:01:02.320,0:01:09.520
static html hypertext markup language

0:01:06.720,0:01:10.400
i was live streaming audio on that

0:01:09.520,0:01:12.640
website

0:01:10.400,0:01:14.400
and then i tested it because you know i

0:01:12.640,0:01:15.280
converted the website and so you want to

0:01:14.400,0:01:18.320
test

0:01:15.280,0:01:20.240
and the audio would not work in mozilla

0:01:18.320,0:01:23.280
firefox web browser

0:01:20.240,0:01:26.960
and i was stumped i was like

0:01:23.280,0:01:29.680
incredulous with a chagrin

0:01:26.960,0:01:30.799
and i was like what the fuck so here is

0:01:29.680,0:01:34.000
the solution

0:01:30.799,0:01:36.159
if you have problems streaming audio or

0:01:34.000,0:01:41.840
getting audio to play

0:01:36.159,0:01:41.840
in hyper text markup language

0:01:42.079,0:01:45.520
with the audio tag

0:01:46.479,0:01:49.759
in mozilla firefox and also possibly

0:01:48.880,0:01:52.640
opera

0:01:49.759,0:01:53.360
here is the possible fix this is what

0:01:52.640,0:01:55.920
fixed

0:01:53.360,0:01:57.119
my problem here is the code so let me

0:01:55.920,0:01:59.920
quickly describe

0:01:57.119,0:02:00.719
the code now in hypertext markup

0:01:59.920,0:02:03.680
language

0:02:00.719,0:02:06.000
the current version is five you are able

0:02:03.680,0:02:07.680
to embed both audio and video

0:02:06.000,0:02:09.920
because it has a built-in audio and

0:02:07.680,0:02:11.360
video player it’s not the bling bling

0:02:09.920,0:02:13.920
bling it’s not

0:02:11.360,0:02:16.480
you know holly weird style it’s not even

0:02:13.920,0:02:16.720
las vegas style with the flashing lights

0:02:16.480,0:02:20.640
and

0:02:16.720,0:02:22.800
oh my god the the most gorgeous

0:02:20.640,0:02:23.760
you know media player on the planet oh

0:02:22.800,0:02:26.879
my god no

0:02:23.760,0:02:27.360
it has a basic audio player but it works

0:02:26.879,0:02:31.360
very

0:02:27.360,0:02:33.760
well this is my original code

0:02:31.360,0:02:36.160
so in hypertext markup language you use

0:02:33.760,0:02:39.680
you can use this tag

0:02:36.160,0:02:43.760
to stream and play audio

0:02:39.680,0:02:45.599
in your website audio controls that’s

0:02:43.760,0:02:50.319
the opening tag

0:02:45.599,0:02:53.760
controls tells it to load controls like

0:02:50.319,0:02:57.120
you know volume adjustment

0:02:53.760,0:02:58.720
etc you can use the you can take out the

0:02:57.120,0:03:00.239
controls if you wanted to and it would

0:02:58.720,0:03:02.560
just be the audio tag but i don’t want

0:03:00.239,0:03:05.519
to digress about the specifics

0:03:02.560,0:03:06.000
of each you know tag in hypertext markup

0:03:05.519,0:03:07.840
language

0:03:06.000,0:03:09.200
because i’m really not an expert but i

0:03:07.840,0:03:11.280
know how to code some

0:03:09.200,0:03:12.239
all right now you have to tell the

0:03:11.280,0:03:14.879
source

0:03:12.239,0:03:16.720
so this second line is just telling

0:03:14.879,0:03:20.400
hypertext markup language

0:03:16.720,0:03:20.400
this the source of the audio

0:03:20.480,0:03:27.120
so that it will play in an embedded

0:03:23.680,0:03:30.319
player on the web page

0:03:27.120,0:03:32.319
and then you tell the hypertext markup

0:03:30.319,0:03:33.840
language what is the type what is the

0:03:32.319,0:03:37.200
type of audio

0:03:33.840,0:03:37.200
that you’re wanting me to play

0:03:37.920,0:03:45.519
and audio slash mpeg is actually for mp3

0:03:42.480,0:03:49.360
so officially mozilla firefox supports

0:03:45.519,0:03:50.959
mp3 although mp3 i think requires a

0:03:49.360,0:03:52.560
license i could be wrong but i think

0:03:50.959,0:03:53.920
mozilla has to pay a license fee in

0:03:52.560,0:03:57.680
order for you to

0:03:53.920,0:04:00.799
have the ability to play mp3 audio

0:03:57.680,0:04:04.319
in their web browser mozilla firefox

0:04:00.799,0:04:05.519
now og which i will get to is an open

0:04:04.319,0:04:09.599
source codec

0:04:05.519,0:04:09.599
they don’t require a licensing fee

0:04:10.480,0:04:15.840
however according to a stack overflow

0:04:16.320,0:04:20.239
question post that i found

0:04:21.040,0:04:24.960
both mozilla firefox and opera they

0:04:23.600,0:04:27.759
don’t they support

0:04:24.960,0:04:29.280
mp3 but they don’t necessarily like to

0:04:27.759,0:04:31.360
support it

0:04:29.280,0:04:33.040
it doesn’t work very well so this is

0:04:31.360,0:04:35.759
what fixed my problem

0:04:33.040,0:04:37.919
now here’s the closing tag slash audio

0:04:35.759,0:04:42.960
in hypertext markup language

0:04:37.919,0:04:46.479
the forward slash closes the tag

0:04:42.960,0:04:49.120
it tells the interpreter stop

0:04:46.479,0:04:50.880
stop with the audio controls stop right

0:04:49.120,0:04:53.759
now

0:04:50.880,0:04:55.600
here’s the second line that i added to

0:04:53.759,0:04:57.199
fix my problem

0:04:55.600,0:05:00.240
it’s just this line right here that i

0:04:57.199,0:05:03.199
highlighted it i’m telling it the source

0:05:00.240,0:05:04.560
of the audio it could be an mp3 file it

0:05:03.199,0:05:07.759
could be

0:05:04.560,0:05:08.800
the destination on the web server to an

0:05:07.759,0:05:11.199
mp3 or

0:05:08.800,0:05:12.400
another audio file obviously this is not

0:05:11.199,0:05:14.240
but i’m not going to get into the

0:05:12.400,0:05:16.560
details here

0:05:14.240,0:05:17.680
this is what fixed it i added in this

0:05:16.560,0:05:21.199
type

0:05:17.680,0:05:23.520
so i added two types two lines

0:05:21.199,0:05:24.800
with the same source but with two

0:05:23.520,0:05:28.080
different

0:05:24.800,0:05:31.600
audio types type equals

0:05:28.080,0:05:34.639
audio slash og ogg

0:05:31.600,0:05:37.120
is an open source audio codec that both

0:05:34.639,0:05:39.680
mazuro firefox and opera supports

0:05:37.120,0:05:41.039
and it’s open source and so you don’t

0:05:39.680,0:05:43.120
have to pay a licensing fee

0:05:41.039,0:05:44.639
you know what i’m saying and that’s what

0:05:43.120,0:05:46.240
fixed it i don’t know why that is i

0:05:44.639,0:05:48.560
don’t know if it’s a glitch or a bug

0:05:46.240,0:05:50.560
with mozilla firefox web browser

0:05:48.560,0:05:52.160
but according to the post from stack

0:05:50.560,0:05:55.360
overflow

0:05:52.160,0:05:58.479
i guess it you know both mozilla firefox

0:05:55.360,0:05:58.800
and opera web browsers and notorious for

0:05:58.479,0:06:02.000
not

0:05:58.800,0:06:02.560
necessarily being you know mp3 friendly

0:06:02.000,0:06:04.960
even though

0:06:02.560,0:06:07.280
both web browsers support mp3 so i’m

0:06:04.960,0:06:08.319
just not 100 certain all i know is i fix

0:06:07.280,0:06:10.240
the problem

0:06:08.319,0:06:12.240
now when i went back to that and i can’t

0:06:10.240,0:06:14.080
demonstrate because it’s a third-party

0:06:12.240,0:06:15.919
website it’s an activist website

0:06:14.080,0:06:17.600
and i will never ever discuss it because

0:06:15.919,0:06:20.160
of the american

0:06:17.600,0:06:21.520
communist socialist americans that do

0:06:20.160,0:06:23.840
not want to become free

0:06:21.520,0:06:25.600
they are commies their control freaks

0:06:23.840,0:06:26.080
they will snitch on you they will troll

0:06:25.600,0:06:28.560
you

0:06:26.080,0:06:31.120
they will swat you ad nauseum at

0:06:28.560,0:06:31.120
infinite

0:06:32.880,0:06:38.160
but if you run into this problem where

0:06:35.039,0:06:39.120
for whatever reason html5 audio player

0:06:38.160,0:06:41.840
is not working

0:06:39.120,0:06:43.759
in mozilla firefox web browser this is a

0:06:41.840,0:06:46.800
potential fix

0:06:43.759,0:06:51.440
you you tell you you give the

0:06:46.800,0:06:53.840
html you stipulate two types of audio

0:06:51.440,0:06:55.039
and it actually fixed it before it would

0:06:53.840,0:06:57.520
not work with this

0:06:55.039,0:06:58.720
tag or excuse me with this type i don’t

0:06:57.520,0:07:01.039
know why that’s bizarre

0:06:58.720,0:07:02.639
but when i added the audio alt tag it

0:07:01.039,0:07:06.080
worked and

0:07:02.639,0:07:07.440
i’m my streamer the streams audio alive

0:07:06.080,0:07:11.680
24 hours a day on this

0:07:07.440,0:07:14.960
website it’s actually

0:07:11.680,0:07:17.440
the variable i stipulated was mp3

0:07:14.960,0:07:19.599
so it’s streaming in mp3 but it won’t

0:07:17.440,0:07:22.560
play in mp3 in mozilla firefox

0:07:19.599,0:07:23.680
so i added aug as a type and it and it

0:07:22.560,0:07:27.360
plays now

0:07:23.680,0:07:27.360
i added the additional

0:07:27.440,0:07:32.160
line right here underneath this one in

0:07:30.479,0:07:33.599
between the two tags in between the

0:07:32.160,0:07:36.880
opening and the closing

0:07:33.599,0:07:39.919
i saved it the changes on my web server

0:07:36.880,0:07:42.400
i cleared the web browser cache

0:07:39.919,0:07:44.000
for mozilla and i refreshed that page

0:07:42.400,0:07:46.240
and bam

0:07:44.000,0:07:47.759
it loaded the player correctly if if it

0:07:46.240,0:07:49.759
doesn’t if it will not play

0:07:47.759,0:07:51.039
it could be it could be just you know a

0:07:49.759,0:07:52.800
coding error

0:07:51.039,0:07:54.479
or in this instance it didn’t like the

0:07:52.800,0:07:57.680
type i don’t know why that is

0:07:54.479,0:07:58.319
the button will be grayed out the button

0:07:57.680,0:08:00.000
will

0:07:58.319,0:08:01.680
will not be grayed out and you’ll be

0:08:00.000,0:08:04.560
able to click on it

0:08:01.680,0:08:06.720
if the stream loads correctly it loaded

0:08:04.560,0:08:10.400
correctly i clicked on play and bam

0:08:06.720,0:08:13.360
is start playing so that is my solution

0:08:10.400,0:08:13.840
and you can check out my blog post where

0:08:13.360,0:08:15.840
i

0:08:13.840,0:08:17.280
you know discuss more about this and

0:08:15.840,0:08:18.639
then you can check out the code that

0:08:17.280,0:08:21.479
you’ll need to enter

0:08:18.639,0:08:23.440
now this is for audio only this is for

0:08:21.479,0:08:25.680
html5

0:08:23.440,0:08:26.800
hypertext markup language and this is

0:08:25.680,0:08:32.399
for embedding

0:08:26.800,0:08:35.200
the the built-in audio player that html5

0:08:32.399,0:08:37.039
includes now and how to get it to work

0:08:35.200,0:08:38.240
in mozilla firefox and opera i did not

0:08:37.039,0:08:40.959
test an opera

0:08:38.240,0:08:41.760
i have not installed opera web browser

0:08:40.959,0:08:45.200
in like

0:08:41.760,0:08:47.200
what a century i mean yeah

0:08:45.200,0:08:49.360
five years at least because i never

0:08:47.200,0:08:50.320
really liked opera yeah it worked okay i

0:08:49.360,0:08:53.839
just did

0:08:50.320,0:08:55.760
the interface the graphical user

0:08:53.839,0:08:57.600
interface is just kind of

0:08:55.760,0:08:59.519
i’m sorry but for me it was kind of

0:08:57.600,0:09:02.480
jankety

0:08:59.519,0:09:04.800
i know that slang oh i know you pale

0:09:02.480,0:09:06.959
skinned european supremacists

0:09:04.800,0:09:08.000
number you hate us people with color and

0:09:06.959,0:09:10.160
especially you don’t like

0:09:08.000,0:09:11.839
it when we use slang or we don’t use

0:09:10.160,0:09:15.839
proper european

0:09:11.839,0:09:18.160
terms all right it was janky but

0:09:15.839,0:09:20.240
you know i should probably install opera

0:09:18.160,0:09:22.560
so i could test properly i did have i

0:09:20.240,0:09:25.839
don’t like mozilla firefox web browser

0:09:22.560,0:09:27.360
it’s bloated it’s it’s largest although

0:09:25.839,0:09:29.680
i will say recently

0:09:27.360,0:09:32.640
when i do use it to test my website it

0:09:29.680,0:09:34.640
seems to be functioning faster

0:09:32.640,0:09:37.279
and whereas a couple of months ago i’m

0:09:34.640,0:09:39.519
like what the fuck is this shit

0:09:37.279,0:09:41.200
it is indeed a brave new world for

0:09:39.519,0:09:44.640
people with color in the european pale

0:09:41.200,0:09:48.000
skin supremacist world order

0:09:44.640,0:09:50.000
the web bras are brave you know it loads

0:09:48.000,0:09:52.480
it up pretty quick but fucking mozilla

0:09:50.000,0:09:53.920
firefox but now recently it’s much much

0:09:52.480,0:09:56.320
quicker i’m not sure why that is but i

0:09:53.920,0:09:59.440
do not rely on mozilla firefox but i i

0:09:56.320,0:10:01.279
understand that a lot of individuals

0:09:59.440,0:10:02.720
on the internet they will use mozilla

0:10:01.279,0:10:04.959
firefox they will use

0:10:02.720,0:10:06.640
opera and they will use chrome i did not

0:10:04.959,0:10:09.279
test in chrome

0:10:06.640,0:10:10.000
now brave is based upon chromium but

0:10:09.279,0:10:12.800
it’s not

0:10:10.000,0:10:14.720
exactly like google chrome web browser

0:10:12.800,0:10:17.200
so but i should probably

0:10:14.720,0:10:18.000
install well let’s see i guess i should

0:10:17.200,0:10:21.440
just install

0:10:18.000,0:10:22.240
every web browser ever built including

0:10:21.440,0:10:25.440
netscape

0:10:22.240,0:10:26.560
and how about links the text only i mean

0:10:25.440,0:10:28.959
it gets ridiculous

0:10:26.560,0:10:30.880
and some of these web browser developers

0:10:28.959,0:10:33.920
they don’t necessarily support

0:10:30.880,0:10:38.240
all of the same media codex

0:10:33.920,0:10:40.880
so it’s just but i am much happier

0:10:38.240,0:10:43.279
with i have two websites now that i

0:10:40.880,0:10:46.640
converted from that god awful wordpress

0:10:43.279,0:10:49.200
with that atrocious guten editor

0:10:46.640,0:10:49.920
talk about gluten i mean intolerance i

0:10:49.200,0:10:53.680
mean good

0:10:49.920,0:10:59.600
i have a guten editor intolerance

0:10:53.680,0:10:59.600
you know what i’m saying adios