Is it possible stop an audio player from displaying, but still have the audio play on click?

I’m working on a project and there are going to be a few instances where clicking on a certain part of an image plays audio. I’m a beginner and honestly I’m relying on tutorials a lot, but I was able to find a tutorial and I can get the audio to play on click, but the player pops up and shifts the page down (making the black background image visible). Is there a way to hide the player from here?

I found a few tutorials on hiding the player, but I can’t get them to work with the onclick line that I have, but I’m not sure if that’s just user error, or if it’s just not possible/compatible with the chunk of code I have here(I’m using neocities to make this site, if that helps in anyway). Sorry if this isn’t the best place to ask, I haven’t been finding much of anything else, so any advice is greatly appreciated! Thanks!

Here’s the code:

And here’s how the top of the page looks after clicking on the clickable area:

Hi there!

If you could post your HTML and CSS as code to copy and paste, we could work something out.

However, and this is a personal thought, I would say that hiding any video or sound player is bad for accessibility. If there is no visual, will the user know where and what to click to access this sound? Would a screen reader accurately depict what you’re trying to display to a blind user? Perhaps instead of hiding the player, you could make it fit the aesthetic instead. :slight_smile:

1 Like

If anything, I could probably just leave it at the end of the day and figure out how to move it to the bottom of the page, since I do have a button for transcripts down there. And It’s not in the (very small, sorry) screenshot, but there is a section of the image that marks where the clickable area is. Thanks!

Here’s the code for the HTML(if you need the URL to the actual page, let me know! It’s nowhere near done, so I’m keeping it hidden for now):

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
  document.getElementById("dummy").innerHTML=
    "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
  </head>
  <body background= "https://sitename.neocities.org/blackbg.png">
  <span id="dummy"></span>
  
  <map name="clickable">
  <area shape="circle" coords="1810,340,60" href="#" onclick="playSound('Opening-Squeaky-Door-2-www.fesliyanstudios.com.mp3');">
	</map>
  <img usemap="#clickable" src="https://sitename.neocities.org/ROOMgifTest.gif" alt="picture" width="1920px" height="1080px">
  
  
<p id=here>&nbsp;</p>
    <form>
      <input type="button" value="Transcript" onclick=
      'document.getElementById("here").innerHTML="*door opening* subtitle test!"'>
    </form>

  </body>
</html>

And the CSS for the whole site (it’s very barebones right now, I’m trying to focus on all the art assets and then build as I finish stuff):

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

I would like the link to the actual site if it’s currently being hosted.

I want to recreate what you have exactly, but there must be some kind of API connected to the assets you’re using from neocities, so I can’t replicate it exactly.

Here’s the link to the page itself:

https://doraspickadoorperegrination.neocities.org/bakery

Let me know if you need anything else, I’m at work right now, but I’ll get back to you as soon as I can.