Форум

Могу сделать прототип

- возможность включения и выключения озвучки, с запоминанием на кукес ( по умолчанию выключено) - это легко
- озвучка кнопок и ссылок - тоже делается элементарно

Вопрос только теперь в том, как должна выглядеть эта выключалка и где должна располагаться?

T-34 сказал(а)
Не могу добавить свой код - форум не позволяет, сообщение с кодом не добавляются

Сменил группу. Теперь можешь использовать коды. Где на твоём сайте можно глянуть блок со сменой стилей?

- озвучка конпок и ссылок
- озвучка кнопок главной страницы ( звук отличный от ссылок и др кнопок)

Кстати, озвучка при каком событии? Нажатие или наведение?

Вот накидал демку:

T-34 сказал(а)
Звук по умолчанию выключен, но при нажатии на любую ссылку включается

Звук по-умолчанию включен

T-34 сказал(а)
Не работает, пока не нажмёшь на любую ссылку

Не на любую ссылку, а клик по странице. Это требование браузера - первичное взаимодействие со страницей должно быть осуществлено пользователем

T-34 сказал(а)
- нижние кнопки (блок2) всего 6 штук, при наведении и нажатии у каждой свой звук.

Можно будет так сделать

T-34 сказал(а)
- средние кнопки (блок1) при наведении проигрывается 4 звука по очереди (по одному звуку на кнопку), при нажатии у всех 1 звук

Да, и это можно сделать без проблем

Короче, вот HTML:

<div class="block1">
  <a href="#" apoplaytester="//imapo.ru/sound/aporing1.ogg,//imapo.ru/sound/aporing2.ogg">Меню №1</a>
  <a href="#" apoplaytester="//imapo.ru/sound/aporing3.ogg,//imapo.ru/sound/aporing4.ogg">Меню №2</a>
  <a href="#" apoplaytester="//imapo.ru/sound/aporing5.ogg,//imapo.ru/sound/aporing6.ogg">Меню №3</a>
  <a href="#" apoplaytester="//imapo.ru/sound/aporing7.ogg,//imapo.ru/sound/aporing8.ogg">Меню №4</a>
  <a href="#" apoplaytester="//imapo.ru/sound/aporing9.ogg,//imapo.ru/sound/aporing10.ogg">Меню №5</a>
 <br> 
 <a href="#" apoplaytester="null,//imapo.ru/sound/aporing2.ogg">Только наведение</a>
  <br>
  <a href="#" apoplaytester="//imapo.ru/sound/aporing2.ogg,null">Только клик</a>
</div>

<br><br>

<div class="apomuteblock">
  <a href="#">Включить все звуки</a>
</div>

<audio id="apoaudio" autoplay="false" type="audio/mp3"></audio>

Вот JS:

<script>
$ = jQuery;

$(function() {
  $('*[apoplaytester]').each(function() {
    if($(this).attr('apoplaytester').split(',')[0] != null) {
      $(this).click(function() {
        aposoundsplay($(this).attr('apoplaytester').split(',')[0]);
      })
    }
    if($(this).attr('apoplaytester').split(',')[1] != null) {
      $(this).mouseover(function() {
        aposoundsplay(false, $(this).attr('apoplaytester').split(',')[1]);
      });
    };
  });
  
  // Если звук отключен
  if(localStorage.getItem('muted') == 1) {
    $('.apomuteblock a').attr('apoactive', 'true').html('Звуки выключены');
  };
  
  // Функция выключения звука
  $('.apomuteblock a').click(function() {
    if($(this).attr('apoactive')) {
      $(this).removeAttr('apoactive').html('Выключить все звуки');
      localStorage.removeItem('muted');
    } else {
      $(this).attr('apoactive', 'true').html('Звуки выключены');
      localStorage.setItem('muted', 1);
    };
  });
});

function aposoundsplay(a, b) {
  var audioblock = $('#apoaudio');
  if(localStorage.getItem('muted') != 1) {
    if(a != false) {
      audioblock.attr('src', a).play();
    };
    if(b != false) {
      audioblock.attr('src', b).play();
    };
  };
};
</script>

Использовать очень просто. Для любой ссылки добавляешь атрибут apoplaytester со ссылками на аудиофайлы. Пример:

<a href="#" apoplaytester="//imapo.ru/sound/aporing1.ogg,//imapo.ru/sound/aporing2.ogg">Меню №1</a>

Если нужен звук только для наведения или только для клика, вот примеры:

<a href="#" apoplaytester="null,//imapo.ru/sound/aporing2.ogg">Только наведение</a>

<a href="#" apoplaytester="//imapo.ru/sound/aporing2.ogg,null">Только клик</a>

ДЕМО: