Phát âm thanh khi nhấp vào JavaScript

Âm thanh HTML5 trên nhiều trình duyệt cho các sự kiện "OnClick" có thể được sử dụng trên văn bản, hình ảnh hoặc phần div trên trang web HTML. Hoạt động trong tất cả các trình duyệt web và cả trong các phiên bản IE cũ hơn [7 & 8] bằng cách sử dụng mã HTML "bgsound" dự phòng. Xem ghi chú ở dưới cùng của trang này

Nhấp vào ví dụ âm thanh
Những ví dụ này bao gồm âm thanh khi nhấp vào văn bản, nhấp vào hình ảnh hoặc nhấp vào vùng div. Bạn sẽ nghe thấy tiếng nhấp chuột ngắn khi nhấp vào bất kỳ yếu tố nào trong 3 yếu tố này. [ xem ví dụ ]

Bấm Cho Âm Thanh

Thêm âm thanh nhấp chuột vào trang web của bạn
Sử dụng thẻ "âm thanh" HTML5. Thực hiện theo các bước bên dưới để thêm âm thanh vào bất kỳ trang web HTML nào

Bước 1.

Tải xuống tệp âm thanh nhấp chuột

Bước 2. Từ tệp zip đã tải xuống, sao chép "sound- title. js" và 2 tệp âm thanh,. mp3 và. ogg vào thư mục trang web chính của bạn. Đặt "hình ảnh âm thanh. jpg" trong thư mục ảnh của bạn

ghi chú. Các. ogg dành cho Firefox và Opera. Bản mp3 được sử dụng cho IE, Safari và Chrome. Bạn có thể tùy chọn sử dụng wav bằng cách chỉnh sửa mã ở bước #4 thành. wav và chỉnh sửa "sound- title. js" để sử dụng wav

ghi chú. Code bgsound dùng cho các phiên bản IE trước IE9

Bước 3. Chọn, sao chép và dán đoạn mã sau vào trang HTML của bạn. Mã này nằm ở phần trên cùng của trang HTML của bạn

Bước 4. Chọn, sao chép và dán đoạn mã sau vào trang HTML của bạn. Mã này ở gần cuối trang. Đặt nó sau khi bạn nhấp vào văn bản, hình ảnh hoặc div

Bước 5. Chọn, sao chép và dán đoạn mã sau để thêm âm thanh nhấp vào văn bản, hình ảnh hoặc mã div của bạn

Mã cho âm thanh bấm văn bản

Bấm Cho Âm Thanh

Mã cho âm thanh bấm vào hình ảnh

Mã cho vùng âm thanh div

Bấm Cho Âm Thanh

Bước 6 Kiểm tra. Kiểm tra trang của bạn trong một số trình duyệt khác nhau như IE, Chrome, Firefox và Safari nếu có thể

Today in this blog post, we will learn how to play sound when a user clicks on a button using HTML and Javascript. To play sound or audio we can use the HTML element.

We can pass one or more audio sources to the HTML element and the browser will select the appropriate audio file. Below is the example code for using .

In this tutorial instead of using HTML element, we will be using the Audio[] constructor to create the audio HTML element and using that we play and pause audio in javascript.

Phát âm thanh khi nhấp vào nút trong HTML Javascript

Như trong video demo ở trên, chúng tôi đã tạo nút phát và tạm dừng bằng HTML. Khi người dùng nhấp vào nút phát, chúng tôi sẽ phát tệp âm thanh bằng javascript. Tương tự, khi nhấp vào nút tạm dừng, chúng tôi dừng phát âm thanh

Bước 1. Tạo nút Play và Pause trong HTML

Play Audio


  Play
  Pause

Trong mã HTML ở trên, chúng tôi đã thêm hai nút một để phát âm thanh và một nút khác để tạm dừng âm thanh hiện đang phát. Đã sử dụng một số CSS để tạo kiểu cho các nút của chúng tôi

styles.css

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #EBFC75;
}

p {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: #17193F;
  margin-bottom: 20px;
}

.action-btns {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.btn {
  width: 12rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  border: none;
  border-radius: 0.2rem;
  padding: 0.5rem;
  cursor: pointer;
}

.play {
  background-color: #89B016;
}

.play:hover{
  background-color: #6e8d12;
}

.pause {
  background-color: #E7CF20;
}

.pause:hover{
  background-color: #d0ba1d;
}

Bước 2. Phát âm thanh khi nhấp vào nút trong Javascript

script.js

let playBtn = document.getElementsByClassName["play"];
let pauseBtn = document.getElementsByClassName["pause"];

let text = document.querySelector["p"];

const audio = new Audio["./audio.mp3"];

playBtn[0].addEventListener["click", [e] => {
  audio.play[];
  text.innerHTML = "Audio Playing🔊";
}];

pauseBtn[0].addEventListener["click", [e] => {
  audio.pause[];
  text.innerHTML = "Audio Paused";
}];

Ở đây, chúng tôi đã sử dụng hàm tạo Audio[] để tạo một phần tử âm thanh HTML mới và chúng tôi đang chuyển đường dẫn tệp âm thanh dưới dạng tham số cho nó. Sau đó thêm trình xử lý sự kiện cho cả nút phát và tạm dừng

Inside the event listener of the play button, we are using audio.play[] method to play the audio file and we are updating the

tag text to `Audio Playing 🔊`.

Similarly, inside the pause button event listener, we are using audio.pause[] method to pause the playing audio. And updating the

tag innerHTML to `Audio Paused`.

Ngoài ra kiểm tra

• Cửa sổ bật lên tự động bằng HTML và CSS

Kho lưu trữ GitHub

Phần kết luận

Trong hướng dẫn ngắn này, chúng ta đã học cách phát và tạm dừng âm thanh hoặc âm thanh khi nhấp vào nút bằng HTML và Javascript. Hy vọng nó hữu ích

Làm cách nào để phát âm thanh bằng JavaScript?

Làm cách nào để thêm âm thanh vào nút trong JavaScript?

Làm cách nào để phát âm thanh trong JavaScript khi nhấp?

Làm cách nào để phát âm thanh trong HTML bằng nút?