Html звук при нажатии кнопки

Звук по нажатию на ссылку

Воспроизвести звуковой файл на сайте достаточно просто, не зависимо от того каким образом выполнять запуск этого файла. Давайте рассмотрим эту задачу на примере проигрывания звукового эффекта по нажатию на ссылку. Итак, имеем стандартный тег html ссылки:

Для проигрывания звука используем объект Audio JavaScript . Его нужно создать, назначить ему звуковой файл, а после этого можно будет его проиграть.

var myAudio = new Audio; // создание экземпляра класса Audio
myAudio.src = "warning.wav"; // назначение звукового файла
myAudio.play(); // воспроизвести звук

Можно назначить этот код непосредственно ссылке в атрибуте onclick, но для удобства лучше оформить все это в виде готовой функции. В итоге, получится:

Теперь в нужной ссылке назначаем выполнение функции playAudio() на событие onclick (или любое другое событие).

Для большего удобства можно назначать эту функцию с использованием jQuery.

В приведенном примере, обработчик на событие click (нажатие мышью) назначен объекту с идентификатором myLink. Аналогично можно назначить:

$(‘.mylinks’). – все объекты с классом mylinks. $(‘a’). – все ссылки на странице.

Таким образом, можно назначить воспроизведение звукового файла на любое событие любого объекта.

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

Назначение нескольких разных звуков на ссылках

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

Здесь myLink1 и myLink2, соответствующие id нужных ссылок.

Источник

Делаем простой звук клика по кнопке с помощью JavaScript и CSS3

Приводим Вам простой пример воспроизведения небольшой звуковой дорожки при клике на определенный элемент на странице. С помощью JavaScript. С использованием небольшой библиотеки.

Занимаясь frontend-разработкой у Вас может появиться потребность реализовать звуковой сопровождение какого-либо UI элемента. Будь то кнопка, или всплывающее окно с характерным появлением. В общем, задача весьма распространенная. Разумеется, первое что Вы найдете в поиске, будут варианты реализации на jQuery . Но jQuery – это тяжелая библиотека и Ваш сайт может вовсе ее не использовать. Предлагаем Вам универсальное решение в несколько строк кода и мини-плагина Tone.js :

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

Добавим стилей:

И наконец, обработчик:

var button = document.querySelector('.button'); function setupSynth() < window.synth = new Tone.Synth(< oscillator: < type: 'sine', modulationFrequency: 0.5 >, envelope: < attack: 0, decay: 0.2, sustain: 0, release: 0.5, >>).toMaster(); > function boopMe() < if (!window.synth) < setupSynth(); >window.synth.triggerAttackRelease(600, '9n'); > button.addEventListener('touchstart', function(e) < e.stopPropagation(); e.preventDefault(); boopMe(); >); button.addEventListener('mousedown', boopMe);

Сначала ищем элемент с классом button , определяем параметры плагина Tone.js . Строка type: ‘sine’ отвечает за звук. Поэкспериментировать со звуками Вы можете взяв их со страницы примеров плагина. Т.е. просто замените значения параметра type на любой другой звук из документации.

Источник

Звук клика по кнопке при помощи JavaScript

Рассматривая структура, а точнее создание данного образование, как звук, то здесь основном всю работу берет JavaScript, где подводим к нему класс, который идет от HTML и аналогичным способом прописан в CSS, это для того, чтоб сформировать небольшой эффект, как изменение оттенка. Так как стандартная кнопка, где нет совершенно не какого оформление, по мне это лучше, так как здесь присутствует звучание, которое вы можете проверить на Demo странице.

Как воспроизвести звук при нажатии кнопки на HTML + CSS

Приступаем к установке

.kauvec_adelon <
font-family: ‘Open Sans’, sans-serif;
font-size: 2rem;
color: #e9dfdf;
background: #16a90c;
padding: 1.2rem 2.6rem;
border-radius: 0.2rem;
transition: opacity .3s;
>

.kauvec_adelon:hover <
cursor: pointer;
background: #0b460a;
>

const audio = new Audio(«https://www.fesliyanstudios.com/play-mp3/387»);
const buttons = document.querySelectorAll(«.kauvec_adelon»);

buttons.forEach(button => <
button.addEventListener(«click», () => <
audio.play();
>);
>);

Не забываем, что кнопка идет, это как показатель, где вы можете добавить его к любому другому элементу, если хотите. Это может быть логотип или ключевое слово, которое установлено под ссылкой для перехода.

waak 2022-08-06 14:35 1 , ответ пользователю waak

Не знаю зачем такой код писать когда можно использовать да и проше будет на любую ссылку или кнопку картинку ну и тд! вешаем онклик

при таком раскладе перехода не будет а что бы оставить возможность перейти по ссылки то используем такой код

ну и конечно же не забываем заменить слова ссылка на мелодию на ссылку на мелодию

Kosten 2022-08-06 20:41 2 , ответ пользователю Kosten

waak, я забыл, что у тебя есть что то по круче и так сказать проще. Хотя когда есть выбор, это тоже хорошо.

-SAM- 2022-08-07 04:04 3 , ответ пользователю -SAM-

Здесь не равнозначный выбор. В данном случае при клике на каждую кнопку (с заданым классом) цепляется как раз отдельный скрипт в тело документа страницы (с прописанным путём на аудио-композицию в переменную). Тогда как в предложенном waak — функция прописана сразу к элементу (при клике на который будет играть нужная мелодия, отдельная для каждого).

В общем, всё зависит от кол-ва элементов, при клике на которые воспроизводиться будет (и что именно). Понятно дело, когда один элемент, то функцию нецелесообразно подключать отдельно. А когда много элементов, что еще должны играть разные мелодии при клике на них, то функция подключается отдельно, при том что в ней переменную-константу на мелодию вообще не пишут тогда (прописывают вместо предложенным waak к элементу не функцию, а переменную на мелодию, скажем, в атрибут data-*).

Kosten 2022-08-07 04:20 4 , ответ пользователю Kosten

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

Источник

How to Play Sound on Button Click in JavaScript

If you want to create JavaScript Play Sound On Click then this tutorial is for you. I have created a button here. When you click on that button, the sound will play. This type of play sound on click you can use it everywhere in the webpage or in a certain element. In most cases we hear a beep sound in the button. So Beep Sound has been used here too. But you can use any other sound if you want. Watch its live demo to learn how it works. Very little JavaScript has been used to create this Play Sound Button. If you know a little JavaScript you can easily create it. HTML Code:
The button was created by the following html code. Here the button function of html is used.

CSS Code:
Buttons are designed with some simple css. First I designed the webpage with some code. Then I designed the button and added the hover effect.

*  margin: 0; padding: 0; border: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; > html, body  height: 100%; > body  display: flex; align-items: center; justify-content: center; background: #dff0f6; > button  font-family: 'Open Sans', sans-serif; font-size: 1.5rem; color: #fff; background: #034d85; padding: 1.1rem 3.4rem; border-radius: .2rem; transition: opacity .2s; > button:hover  cursor: pointer; background: #053056; > 

• First line I added audio using JavaScript. Here I have used beep sound. You can use any audio.
• Then a global constant of buttons is set.
• Then the sound in the ‘audio’ is linked to the button by the onclick event. Then I have used the play () method here to play the audio. play () method starts playing the current audio.

const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387"); const buttons = document.querySelectorAll("button"); buttons.forEach(button =>  button.addEventListener("click", () =>  audio.play(); >); >); 

Hopefully using the tutorial above you will know how to create Play Sound on Button Click.

I have previously created many JavaScript web elements for beginners. Please comment on how you like this onclick play audio button.

Источник

Звуковые эффекты при клике или наведении

Данный скрипт весит всего 1.5 кб и позволяет легко добавлять звуки взаимодействия с элементами.

Примеры:

Наведите на иконку

Нажмите на иконку

Установка:

Подключаем скрипт loudlinks.min.js в конце страницы.

Применение:

На нужный нам тег добавляем класс loud-link-hover для проигрывания звука при наведении и loud-link-click при клике

Далее в этот тег добавляем дата атрибут

Где sound это название mp3 и/или ogg файла

Звуковые файлы sound.mp3 и sound.ogg находятся в корневой папке folder

• Опубликовано: 14.11.2018 / Обновлено: 13.09.2020
• Рубрики: Фото, аудио и видео
• Метки: JavaScript, Аудио
• 14824 просмотра

Смотрите также:

Гармошка из фотографий на jQuery

Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий

Отложенная загрузка контента

Дополнения плагина jquery.lazy для отложенной загрузки фреймов, скриптов, медийных файлов и т.д.

Адаптивный шаблон для проигрывателя jPlayer

Аудио-видео плеер jPlayer и адаптивный шаблон для него | Responsive skin for jPlayer

Добавить комментарий:

Комментарии:

при наведение сразу не срабативат пока не кликнеш потом работает вот ошибка Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

Точно не уверен, но скорее всего это браузеры ставят ограничения.
У меня в хроме и мозиле все норм (правда не помню, делал ли я какие доп. разрешения для него).
Если мы запускаем музыку по ховеру, то можно открыть страницу ночью и без вашего клика оно заорет.
Уж не знаю, на сколько это нужно, вы можете кликнуть в никуда и оно все равно заорет, но гугл орал по этому поводу вроде, что мол нехорошо запускаться медийкам автоматом.

Здравствуйте!
Прошу привести пример когда сработает if ( audioSrc.indexOf(‘>’) > 0 ):
точнее сказать каким будет audioSrc при этом?
Не могу понять.

Скрипт смешного «позабавимся 🙂 » работает по наведению только после любого клика. Покажите пожалуйста где этот первый клик обрабатывается в коде. Все обыскал.

Это скорее всего браузер блокирует. У меня и в хроме и лисе нормально ховер работает.
Поищите в инете как обойти блокировку «воспроизведение треков без ведома юзера»

Это хорошо, значит скрипт не при чем :). Правда, кроме Edge у меня все остальные 4 браузера работают только с первым кликом. В принципе, пустяк, можно разок и кликнуть.

Вопрос напрямую к статье не относится, лишь косвенно, но чувствую что автор в теме.
Вопрос: можно ли задать окончание проигрывания кусочка в файле, начало можно, это как я понял «currentTime»? Есть ли такой параметр для конца проигрывания(не всего файла, а кусочка)?

А для чего такие сложности?
Данный скрипт просто создает аудио тег при нажатии или ховере и запускает его.
currentTime нужна для стопа

Саша, приветик! всё работает, но выводит такую ошибку в консоль: Uncaught (in promise) DOMException У тебя кстати тоже. Это неопасно ? Юзаю Хром, последняя версия

Непойманные обещания переводится ваша ошибка 🙂
А как говорил мой дед — Работает — не трогай!
А как мой прадед — не опасно 🙂

Хаха))) Ладно ладно)) Кстати, это происходит потому что как бы что-то, в общем хроме авто-воспроизведение треков без ведома юзера нечто такое что является ошибкой)) Данное явление при ховер, при клике ничего. Ну в в принципе да)) Работает — не трогай)) Это верно)) Спасибо за прекрасный скрипт!

Здравствуйте у меня не получается.Вот код:

Тут нужно смотреть на то как вы подключили скрипт и загрузили на сайт звуковые файлы (в какую папку).
Дайте ссылку на сайт, постараюсь помочь

Источник