Как издавать звук при нажатии <a>или <button>в JS - PullRequest
Новая
       12

Как издавать звук при нажатии <a>или <button>в JS

0 голосов
/ 10 июня 2019

Как сделать звук ("MySound.mp3") скрытым в фоновом режиме при нажатии на элемент <a> или <button> с идентификатором "click_sound" в JavaScript, возможно ли это?

Помните, я хочу сделать звук в фоновом режиме, если нажата <a> или <button>!

Код: 

<html>
  <head></head>
  <body>
    <a id="click_sound">Click me</a>
  <button id="click_sound">Click me</button>
  </body>
</html>

Имя звукового файла:
MySound.mp3

1 Ответ

0 голосов
/ 10 июня 2019

Самый простой способ сделать то, что вы просите, - это воспроизвести аудио с использованием javascript, когда нажата метка button или a (или действительно любая).Есть несколько способов сделать это:

Вы можете запустить javascript в элементе onmouseup: 

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="new Audio('path_to_audio_file.mp3').play()">Click me</a>
    <button id="click_sound" onmouseup="new Audio('path_to_audio_file.mp3').play()">Click me</button>
  </body>
</html>

или, что еще лучше, не запускать конструктор аудио каждый раз: 

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="audio.play()">Click me</a>
    <button id="click_sound" onmouseup="audio.play()">Click me</button>

      <script>const audio = new Audio('path_to_audio_file.mp3')</script>
  </body>
</html>

Если вы хотите использовать внешний скрипт (либо потому, что у вас есть другой javascript, либо вы просто предпочитаете его так, как я лично), просто поместите его на объект window: 

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="window.audio.play()">Click me</a>
    <button id="click_sound" onmouseup="window.audio.play()">Click me</button>

      <script src='./path_to_file/somefile.js'></script>
  </body>
</html>

somefile.js: 

  window.audio = new Audio('./path_to_audio/sound.mp3')

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

Примечание: Выможно также использовать: 

document.getElementById('click_sound').addEventListener('mouseup', () =>  new Audio('path_to_audio_file.mp3').play())

Для достижения того же самого.

Для получения дополнительной информации см. это и это или поиск "javascriptКонструктор «Audio» и «Событие onmouseup».

...