Как сделать звуковой сигнал в JavaScript?
Звуковой сигнал на веб-сайте можно использовать для следующих задач:
• Оповещение
• Сделать сайт более интерактивным
Вариантов использования этих звуков может быть гораздо больше. Все зависит от творчества и потребностей. Обычно мы создаем функцию в Javascript и вызываем ее всякий раз, когда это необходимо. В этом уроке мы используем кнопку для воспроизведения звукового сигнала, используя метод onclick .
Способ 1. Используйте функцию « Аудио » в Javascript для загрузки аудиофайла.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>нажмите на кнопку</h1>
<button onclick="play()">Жми на меня!</button>
<script>
function play() {
let audio = new Audio('beep.mp3');
audio.play();
}
</script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>нажмите на кнопку</h1>
<button onclick="play()">Жми на меня!</button>
<script>
function play() {
let audio = new Audio('beep.mp3');
audio.play();
}
</script>
</body>
</html>
Способ 2: используйте тег audio в html и воспроизведите его с помощью Javascript.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Нажмите на кнопку</h1>
<audio id="chatAudio">
<source src="beep.mp3" type="audio/mpeg">
</audio>
<button onclick="play()">Жми на меня</button>
<script>
let audio = document.querySelector("#chatAudio");
function play() {
audio.play()
}
</script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Нажмите на кнопку</h1>
<audio id="chatAudio">
<source src="beep.mp3" type="audio/mpeg">
</audio>
<button onclick="play()">Жми на меня</button>
<script>
let audio = document.querySelector("#chatAudio");
function play() {
audio.play()
}
</script>
</body>
</html>
