Phát mp3 khi nhấp vào JavaScript

Trong hướng dẫn này, chúng ta sẽ xem xét cách bao gồm và thao tác âm thanh trong HTML và javascript. Các tệp âm thanh được bao gồm trong HTML như bên dưới

<audio>
    <source src="audio/1.mp3" type="audio/mpeg">
</audio>
                

Các loại định dạng âm thanh

  • mp3. gõ = "âm thanh/mpeg"
  • làn sóng. gõ = "âm thanh/wav"
  • ogg. gõ = "âm thanh/ogg"
Thuộc tính

Các thuộc tính của thẻ âm thanh được viết bên trong thẻ mở của phần tử, như hình bên dưới

Hàm tạo Audio() tạo và trả về một HTMLAudioElement mới có thể được đính kèm vào tài liệu để người dùng tương tác và/hoặc nghe hoặc có thể được sử dụng ngoài màn hình để quản lý và phát âm thanh

new Audio()
new Audio(url)

url Tùy chọn

Chuỗi tùy chọn chứa URL của tệp âm thanh được liên kết với phần tử âm thanh mới

Một đối tượng HTMLAudioElement mới, được định cấu hình để sử dụng để phát lại âm thanh từ tệp được chỉ định bởi url. Thuộc tính preload của đối tượng mới được đặt thành auto và thuộc tính src của đối tượng được đặt thành URL đã chỉ định hoặc

myAudioElement.addEventListener("canplaythrough", (event) => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});
0 nếu không có URL nào được cung cấp. Nếu một URL được chỉ định, trình duyệt sẽ bắt đầu tải tài nguyên phương tiện không đồng bộ trước khi trả về đối tượng mới

Bạn cũng có thể sử dụng các phương thức tạo phần tử khác, chẳng hạn như phương thức

myAudioElement.addEventListener("canplaythrough", (event) => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});
2 của đối tượng
myAudioElement.addEventListener("canplaythrough", (event) => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});
1, để xây dựng một HTMLAudioElement mới

Có ba cách bạn có thể biết khi nào tệp âm thanh đã được tải đủ để cho phép bắt đầu phát lại

  • Kiểm tra giá trị của tài sản
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    4. Nếu là
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    5, thì có đủ dữ liệu để bắt đầu phát lại và phát trong ít nhất một thời gian ngắn. Nếu đó là
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    6, thì có đủ dữ liệu, với tốc độ tải xuống hiện tại, bạn sẽ có thể phát âm thanh đến hết mà không bị gián đoạn
  • Lắng nghe sự kiện
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    7. Nó được gửi đến phần tử
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    8 khi có đủ âm thanh để bắt đầu phát lại, mặc dù có thể xảy ra gián đoạn
  • Lắng nghe sự kiện
    myAudioElement.addEventListener("canplaythrough", (event) => {
      /* the audio is now playable; play it if permissions allow */
      myAudioElement.play();
    });
    
    9. Nó được gửi khi người ta ước tính rằng âm thanh có thể phát đến cuối mà không bị gián đoạn

Cách tiếp cận dựa trên sự kiện là tốt nhất

myAudioElement.addEventListener("canplaythrough", (event) => {
  /* the audio is now playable; play it if permissions allow */
  myAudioElement.play();
});

Nếu tất cả các tham chiếu đến phần tử âm thanh được tạo bằng cách sử dụng hàm tạo Audio() bị xóa, thì phần tử đó sẽ không bị xóa khỏi bộ nhớ bởi cơ chế thu gom rác của thời gian chạy JavaScript nếu quá trình phát lại đang được tiến hành. Thay vào đó, âm thanh sẽ tiếp tục phát và đối tượng sẽ vẫn còn trong bộ nhớ cho đến khi quá trình phát lại kết thúc hoặc bị tạm dừng (chẳng hạn như bằng cách gọi Audio()1). Vào thời điểm đó, đối tượng trở thành đối tượng của bộ sưu tập rác

Làm cách nào để phát nhạc khi nhấp vào JavaScript?

Dòng đầu tiên tôi đã thêm âm thanh bằng JavaScript. .
Sau đó, một hằng số toàn cầu của các nút được thiết lập

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

Đã liên kết .
Phát tệp mp3 bằng javascript
Giải mã tệp âm thanh Base 64 Mp3 thành Mp3 có thể phát được
Nhấp vào biểu tượng phát để bắt đầu âm thanh, sau đó nhấp vào biểu tượng dừng để dừng âm thanh

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

Một trong những phương pháp đơn giản nhất là Thuộc tính OnClick và. phương thức play () . Nếu bạn chỉ sử dụng 3 dòng JavaScript, bạn sẽ nghe thấy tiếng bíp khi nhấp vào nút. Mặc dù bạn có thể sử dụng bất kỳ âm thanh nào khác ở đây nếu bạn muốn.

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

Phương thức HTML DOM Audio play() được sử dụng để bắt đầu phát âm thanh hiện tại . Để sử dụng phương thức Audio play(), người ta phải sử dụng thuộc tính controls để hiển thị các điều khiển âm thanh như phát, tạm dừng, tìm kiếm, âm lượng, v.v., được đính kèm với âm thanh. Phương thức này được sử dụng cùng với phương thức pause().