HTML5 audio-play.pause not working

Hi ya’ll,

So I am trying to add a HTML5 audio element which the user can respond to. When loaded, I have a full screen video that plays and then a audio file to go with the video. The video works, and the audio works, when set to autoplay. However, I would like the user to have that control upon loading. I have had the default HTML5 audio controls, but had no luck when clicking play.pause, nor is it working with adding buttons and a js onclick event. I followed W3Schools tutorial and they didnt even use a function for a onclick event. so I am starting to get lost here, do I need a function or is the audio element already capable of allowing users to interact. Please help.

ps. the hamburger nav bar is still a work in progress so dont mind the code.

Hello, in which system browser did you run your code??


I am running it in both Safari and Chrome, both play audio/video but I cant control by clicking.

i will need you to reset your html code and input this one.

<video controls="controls" poster="the poster.jpg" width="160"  height="150">
<source src="any.m4v" type="video/mp4">
<source src="any.ogv" type="video/ogg">

try this out with the following video extensions, but if you don’t have use only the mp4 which is common.

it gives the default video control settings for each browser depending on which of any you run in.

Sorry but I dont understand why I need to change to video element. The video works fine, its the audio play/pause button on the Audio Controls element that isn’t working.

okay, just give me some moment to check your code

i will like it if you will be able to reset your html code for audio and insert this,

<object data="any.mp3" height="50" width="100" type="audio/mpeg" title="any">
<param name="src" value="any.mp3" />
<param name="controller" value="true" />
<param name="autoplay" value="true" />

with that you can be able to change the autoplay value to either true or false.

Still no luck mate. Thanks for helping.

.background-container {
    position: fixed;
    z-index: -1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;

Ok, so the problem is your z-index, It is set to negative hence It not reachable as it is layered …set the z-index to the top most say z-index:1000 and your audio should work (even without javascript). Add the controls attribute to audio tag for pause/play button

YES!! Thank you!!
The buttons were visible so I was just lost on what was going on.

For people who are still reading this… I found a great article on z-index.