За последние 24 часа нас посетили 19625 программистов и 1602 робота. Сейчас ищет 1881 программист ...

HTML, Проигрывание звука при клике по ссылке с ionSond.js

Тема в разделе "JavaScript и AJAX", создана пользователем brs, 2 мар 2016.

  1. brs

    brs Новичок

    С нами с:
    2 мар 2016
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте!
    Прошу помощи в одной задаче,нужно сделать так,чтобы при клике на ссылку в меню навигации по сайту,проигрывался звук (типа щелчка,дзынь,клац и т.д.) ,для этого я подключил плагин ionsound.js. Но,при клике,он не успевает проиграть и осуществляется переход на вызванную страницу. Так же,чтобы это происходило без задержки в секунду-две(setTimeout не подходит(требование проверяющего задачу)). Спасибо! Вот отрывок кода:
    Код (PHP):
    1. <div id="menu"> 
    2.       [url="index1.html"]Главная[/url]
    3. </div>
    4. <script src="node/jquery.js"></script>
    5. <script src="node/ion.sound.js"></script>
    6. <script>
    7.   $(document).ready(function(){
    8.    $.ionSound({
    9.       sounds:[
    10.        {name: "bell_ring"}
    11.       ],
    12.       preload: true,
    13.       path: "node/sounds/",
    14.       multiplay: true,
    15.       volume: 1.0
    16.     });
    17.    }); 
    18.   </script>
    19.   <script type="text/javascript">
    20.   $(".lines").on("click", function(){  
    21.     $.ionSound.play ("bell_ring");
    22.   });
    23.   </script>
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.j

    Взаимно исключающие требования.

    Добавлено спустя 2 минуты 22 секунды:
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.js
    Делай переход в функции ended_callback
     
  3. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.j

    Переход по ссылке оформить в функцию, обернуть ее и саундплей в еще одну функцию и подменить ей оригинальный саундплей. Чтобы одна за другой шли строго. Чтобы ничего не сломалось, новая функция-подмена должна проксировать наружу возвращаемые данные от оригинального саундплея.

    Велкам ту JS :)

    У меня так в 2д-движке JS-овом отладочный код "паразитивно" врубается в действующий по команде, собирая статистику, перехватывая ввод и вывод, но ничего не ломая. Офигенная вещь в плане удобства.
     
  4. brs

    brs Новичок

    С нами с:
    2 мар 2016
    Сообщения:
    3
    Симпатии:
    0
    Это как вложенные события ?
    Можете пример написать,пожалуйста..?

    Добавлено спустя 9 минут 14 секунд:
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.js
    Так ?
    Код (PHP):
    1. <script>
    2.   $(document).ready(function(){
    3.    $.ionSound({
    4.       sounds:[
    5.        {name: "bell_ring"}
    6.       ],
    7.       preload: true,
    8.       path: "node/sounds/",
    9.       multiplay: true,
    10.       ended_callback: null,
    11.       volume: 1.0
    12.     });
    13.    }); 
    14.   </script>
    Подсказка от модератора:
    Любой код или текст конфигурации пишите между тегом [code=php] и [/code].
    Используйте отступы в коде для форматирования текста.
    Это помогает быстрее понять вас, увеличивает шанс на получение ответа.
    Что выделять? Например: PHP, HTML, CSS, JavaScript, SQL, XML, .htaccess, ini, регулярные выражения, код шаблонизаторов, любая другая разметка, результаты array/object dump и т. д.
     
  5. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Что-то вроде. На пальцах так:
    1) в JS на ходу можно как угодно менять что угодно. Reflection тут повсюду. Никто не помешает в реальном времени отцеплять/прицеплять функции, переопределять любые свойства объектов, добавлять новые и тд. В этом суть JS.
    2) Любая функция - это инкапсулированный код. Для внешнего мира у любой функции есть только сигнатура и возврат.
    3) У нас есть главная функция и есть функция-паразит.
    4) Создаем третью функцию, имеющую сигнатуру как у главной.
    5) В ее тело подцепляем оригинальную главную функцию, а после нее паразитную, замыкаем это дело, чтоб не развалилось.
    6) Возврат оригинальной главной функции перехватываем и потом отдаем как возврат нашей новой функции.
    7) Присваиваем оригинальной функции тело новой функции. Все, подмена сделана.

    Что имеем в итоге: для внешнего мира не изменилось воооообще ничего. Функция принимает те же параметры и возвращает корректные данные. Но ее функциональность изменилась.

    Сейчас занят, к сожалению. Вечером, если не забуду, поищу в коде у себя живой коннектор.

    Добавлено спустя 8 минут 56 секунд:
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.js
    А может и не вечером. Что-то нашел и на работе:
    Код (PHP):
    1. mergeFunctions = function () {
    2.         var arg = arguments;
    3.         var result = function () {
    4.             var caller = this;
    5.             for (var i = 0; i < arg.length; i++) {
    6.                 arg[i].apply(caller, arguments);
    7.             }
    8.         };
    9.         result.clear = function (number) {
    10.             number = number || 0;
    11.             return arg[number];
    12.         };
    13.         return result;
    14.     }; 
    Работает как:
    Код (PHP):
    1. foo = mergeFunctions(foo, bar); // подменить foo на связку foo и bar
    2. foo = foo.clear(); // восстановить оригинальную foo 
    Только ретурны не проксируются. Но это сам допишешь, если будет нужно.
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Вот как ещё один пример https://api.jquery.com/event.preventdefault/
    Удали всё внутри анонимной функции, но оставь event.preventDefault(); после него запускай звук через ionSound, в ended_callback добавь анонимную функцию которая сделает переход по ссылке.

    Ужасный говнокод
    Код (PHP):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title></title>
    5.     <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.js"></script>
    6. </head>
    7. <body>
    8. [url="http://jquery.com"]default click action is prevented[/url]
    9. <script>
    10. $(function() {
    11.     $( "a" ).click(function( event ) {
    12.         event.preventDefault();
    13.         document.myhref = this.href;
    14.         $.ionSound({
    15.             sounds: [{name: "bell_ring"}],
    16.             preload: true,
    17.             path: "node/sounds/",
    18.             multiplay: true,
    19.             ended_callback: mylocation,
    20.             volume: 1.0
    21.         });
    22.     });
    23. });
    24. function mylocation()
    25. {
    26.     window.location = document.myhref;
    27. }
    28. </script>
    29. </body>
    30. </html>
     
  7. brs

    brs Новичок

    С нами с:
    2 мар 2016
    Сообщения:
    3
    Симпатии:
    0
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.j

    Спасибо,за помощь)
     
  8. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Re: HTML, Проигрывание звука при клике по ссылке с ionSond.j

    Я догадывался, что что-то такое там есть, но не искал особо. Через коллбек даже лучше, имхо.