Hướng dẫn javascript play sound on event - javascript phát âm thanh trong sự kiện

Nếu bạn muốn tạo nút âm thanh chơi onclick bằng JavaScript thì hướng dẫn này là dành cho bạn. Tôi đã tạo một nút ở đây. Khi bạn nhấp vào nút đó, âm thanh sẽ phát.

Loại âm thanh chơi này trên nhấp chuột, bạn có thể sử dụng nó ở mọi nơi trong trang web hoặc trong một yếu tố nhất định. Trong hầu hết các trường hợp, chúng tôi nghe thấy một âm thanh tiếng bíp trong nút. Vì vậy, âm thanh Beep đã được sử dụng ở đây quá. Nhưng bạn có thể sử dụng bất kỳ âm thanh nào khác nếu bạn muốn. Xem bản demo trực tiếp của nó để tìm hiểu cách nó hoạt động.

Rất ít JavaScript đã được sử dụng để tạo nút âm thanh chơi này. Nếu bạn biết một chút JavaScript, bạn có thể dễ dàng tạo nó.Play Sound Button. If you know a little JavaScript you can easily create it.

Mã HTML: Nút được tạo bởi mã HTML sau. Ở đây chức năng nút của HTML được sử dụng.
The button was created by the following html code. Here the button function of html is used.

Click me!

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã CSS: Các nút được thiết kế với một số CSS đơn giản. Đầu tiên tôi thiết kế trang web với một số mã. Sau đó, tôi thiết kế nút và thêm hiệu ứng di chuột.
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;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã CSS: Các nút được thiết kế với một số CSS đơn giản. Đầu tiên tôi thiết kế trang web với một số mã. Sau đó, tôi thiết kế nút và thêm hiệu ứng di chuột.
Now play sound on click html has been activated by JavaScript.

• Mã JavaScript: Bây giờ phát âm thanh trên Click HTML đã được kích hoạt bởi JavaScript.
• Dòng đầu tiên tôi đã thêm âm thanh bằng JavaScript. Ở đây tôi đã sử dụng âm thanh tiếng bíp. Bạn có thể sử dụng bất kỳ âm thanh.
• Sau đó, một hằng số toàn cầu của các nút được đặt.

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

buttons.forEach(button => {
  button.addEventListener("click", () => {
    audio.play();
  });
});

Nhập chế độ FullScreenen EXIT Mode FullScreen

Mã CSS: Các nút được thiết kế với một số CSS đơn giản. Đầu tiên tôi thiết kế trang web với một số mã. Sau đó, tôi thiết kế nút và thêm hiệu ứng di chuột.

Mã JavaScript: Bây giờ phát âm thanh trên Click HTML đã được kích hoạt bởi JavaScript.onclick play audio button.