静音/取消静音按钮

I have a set of php/html pages that contain buttons that when the mouse is over it plays a sound. Now I want that when the user clicks on another button, it silence all pages of the site or put them with sound, depending if the sound was already on or not.

I already have an html code that allows me to silence the page, but it only work on the page itself, if I go to any other page or go back to that page they have sound. And I don't want that...

This is an exemple of the code in one of the pages:

<audio preload  id="sombotao">
 <source src="audio/somBotao.ogg"></source>
</audio>

<a href="exemple.php"><img src="img/exemple.png" onMouseOver="document.getElementById('sombotao').play()" /></a>

I've tried using javascript, but it didn’t work. I even tried with php using sessions, but since my experience is very limited it also didn’t work.

Can anyone help me? Where can I find a piece of code as an example?

Thanks in advance. JV

This is completely possible. One solution will take a combination of server side and client side code. Your pages must have code that automatically checks the server every so often for updates to the volume level (This works similar to automatically updating comment feeds or stock tickers, but is so much simpler).

Your solution will look like this:

Step 1

Page 1:

  • Sound is playing

Page 2:

  • Sound is playing

Step 2

Page 1:

  • User clicks the mute button.
  • Page 1 "posts" via ajax to volumecontrol.php

Step 3

Page 1:

  • Query volumecontrol.php and find page is muted, continue muting

Page 2:

  • Query volumecontrol.php and find page is muted, change current volume to "mute"

A little more explanation

Think of this like a whiteboard at a doorway. As people enter and leave the room, they leave instructions for the other members. Members do not have to be present when a message is written, they only have to see the board every so often to coordinate with the other members of the group.

One important part of this whole process is that you will set the volume according to something unique to the user (i.e. a session variable).

Another key is that you use Ajax to push settings to a page in PHP and use Ajax to regularly check the server for updates to that setting.