HTML5 audio-play.pause not working

HTML-CSS
1

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.

2

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

3

Hi,

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

4

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">
</video>

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

5

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

6

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.

7

okay, just give me some moment to check your code

8

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" />
</object>

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

9

Still no luck mate. Thanks for helping.

10 
.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

11

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

12

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

Enjoy