Làm cách nào để bạn tùy chỉnh điều khiển âm thanh trong html?

Chào mừng bạn đến với hướng dẫn nhanh và ví dụ về cách tạo trình phát âm thanh tùy chỉnh HTML. Bạn muốn tạo trình phát tùy chỉnh của riêng mình bằng âm thanh HTML?

Không có cách nào để thay đổi giao diện HTML mặc định của trình duyệt, nhưng chúng ta có thể tạo trình phát âm thanh tùy chỉnh của riêng mình bằng Javascript

• Tạo một đối tượng âm thanh mới – var aud = new Audio("AUDIO.mp3");
• Để phát và tạm dừng – aud.play(); aud.pause();
• Để đặt âm lượng –

  window.addEventListener("load", () => {
    // (A) AUDIO OBJECT + HTML CONTROLS
    var audio = new Audio("sugar-palm-fairy.mp3"), // change to your own!
        aPlay = document.getElementById("aPlay"),
        aNow = document.getElementById("aNow"),
        aTime = document.getElementById("aTime"),
        aSeek = document.getElementById("aSeek"),
        aVolume = document.getElementById("aVolume");
  });

  0
• Cuối cùng, bỏ qua một thời gian cụ thể –

  window.addEventListener("load", () => {
    // (A) AUDIO OBJECT + HTML CONTROLS
    var audio = new Audio("sugar-palm-fairy.mp3"), // change to your own!
        aPlay = document.getElementById("aPlay"),
        aNow = document.getElementById("aNow"),
        aTime = document.getElementById("aTime"),
        aSeek = document.getElementById("aSeek"),
        aVolume = document.getElementById("aVolume");
  });

  1

Điều đó bao gồm ý tưởng cơ bản, nhưng hãy đọc tiếp để biết ví dụ thực tế

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

MỤC LỤC

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

• Không có tệp âm thanh nào được cung cấp trong zip, vui lòng tải xuống tệp của riêng bạn
• Thay đổi

  window.addEventListener("load", () => {
    // (A) AUDIO OBJECT + HTML CONTROLS
    var audio = new Audio("sugar-palm-fairy.mp3"), // change to your own!
        aPlay = document.getElementById("aPlay"),
        aNow = document.getElementById("aNow"),
        aTime = document.getElementById("aTime"),
        aSeek = document.getElementById("aSeek"),
        aVolume = document.getElementById("aVolume");
  });

  2 trong

  window.addEventListener("load", () => {
    // (A) AUDIO OBJECT + HTML CONTROLS
    var audio = new Audio("sugar-palm-fairy.mp3"), // change to your own!
        aPlay = document.getElementById("aPlay"),
        aNow = document.getElementById("aNow"),
        aTime = document.getElementById("aTime"),
        aSeek = document.getElementById("aSeek"),
        aVolume = document.getElementById("aVolume");
  });

  3 thành của riêng bạn

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

 

 

MÁY PHÁT ÂM THANH TÙY CHỈNH

Được rồi, bây giờ chúng ta hãy xem ví dụ từng bước về cách tạo trình phát âm thanh tùy chỉnh. Hãy lưu ý, không có CSS ​​liên quan ở đây, chỉ có cơ học thuần túy

 

BƯỚC 1) HTML

máy nghe nhạc. html

 

  
  
    play_arrow
  
 
  
  

     / 
  
 
  
  

  
  volume_up
  

Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

KIỂM TRA TÍNH TƯƠNG THÍCH

• Phần tử âm thanh
• Hàm mũi tên
• Phạm vi đầu vào

Trình phát âm thanh này rõ ràng là không tương thích ngược với các trình duyệt cũ. Nhưng nó sẽ hoạt động tốt trên tất cả các trình duyệt hiện đại “Hạng A”

 

LIÊN KẾT và THAM KHẢO

• Phần tử phương tiện HTML – MDN
• Âm thanh HTML – WhatWG
• Trình phát âm thanh có danh sách phát – Code Boxx
• Trình phát âm thanh PHP có danh sách phát – Code Boxx

 

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa vui vẻ

Cú pháp nhúng âm thanh trong HTML là gì?

Thuộc tính nào được sử dụng để thêm điều khiển âm thanh?