An on/off audio switch?

HTML & CSS
1

Ive tried so hard to do this on my own and Ive failed. I hope someone can help me with this. I’m trying to embed a tiny toggle to turn off audio that autoloads on my page. Basically one of those tappable things that would turn on / off. I cannot figure it out, and if I manage to get the button on there, it messes of the navbar, and/or doesnt actually do the function of on/off
Thank you in advance for reading.

Here’s the code for my nav bar:

<div grid-row="" grid-pad="2" grid-gutter="4">
	<div grid-col="5" grid-pad="2">
    	<a href="#" rel="home_page"><div style="display: inline-block; transform:rotate(-180deg) scale(-1, 1);"><b>︎</b></div><b>&nbsp; &nbsp; &nbsp;S A R A &nbsp; &nbsp; AN&nbsp; &nbsp; || </b>language</a> arts&nbsp;&nbsp; </div>
	<div grid-col="7" grid-pad="2">
    	<div style="text-align: right">
 <b><a href="Listen" rel="history"></a></b> &nbsp;</div></div></div>
2

Be sure to put your code by putting three of these (```) around the code. Otherwise, you didn’t include your code for us to see.

1 Like
3

I am a complete beginner so thank you for that, I’ll do it now.

1 Like
4

I don’t see any toggle or any audio in the html code that you posted? Indeed the html is not valid html as it has a load of custom attributes so does not look like any html I know and i guess is part of some cms system or similar.

Your question is a little vague as far as I know you would need JS to control turning audio on and off when using custom styled css elements and not the default browser controls.

There are plenty of tutorials around on how to create a switch in CSS.

https://csshint.com/css-toggle-switches/

https://catswhocode.com/html-audio-tag/

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.