Tùy chỉnh trình phát âm thanh HTML5 CSS CodePen

Tôi đang cố điều chỉnh mã của ai đó từ codepen. io đã tạo danh sách phát trình phát âm thanh trực quan đẹp mắt này. Mục tiêu của tôi, tôi muốn đạt được là có nhiều thứ này trên một trang vì mã gốc chỉ hỗ trợ một. Tôi đang cố gắng tìm ra cách để những trình phát âm thanh này hoạt động theo cách riêng của chúng thay vì khi tôi nhấn phát trên một trình phát, nó sẽ tạm dừng trình phát trước đó hoặc ngược lại. Hiện tại, vấn đề là tất cả chúng đều đang chia sẻ cùng một bộ điều khiển âm thanh và tôi đang cố gắng tìm cách nhắm mục tiêu riêng cho từng trình phát âm thanh

Đã cố gắng làm điều này trong một vài ngày vì vậy tôi đang liên hệ để được giúp đỡ. Suy nghĩ ban đầu của tôi mà bạn sẽ thấy trong codepen. io bên dưới là bọc từng div của trình phát âm thanh trong div duy nhất của riêng nó. Sau đó, trong JS, hãy gọi một mảng các div và với forEach lặp lại hàm JS cho danh sách phát âm thanh trên mỗi div. Tôi biết có điều gì đó không ổn với các chức năng của mình hoặc có lẽ là cách tiếp cận của tôi nói chung và tôi rất muốn nhận được một số phản hồi và hướng dẫn

Hiện tại, tôi chỉ có hai trình phát âm thanh để bắt đầu sử dụng nên tôi thậm chí có thể xem ý tưởng của mình có hiệu quả không. Hiện tại cả hai đều truy cập cùng một bài hát/bìa album, tuy nhiên tôi chỉ muốn tìm ra cách để họ chơi khác đi trước khi tìm hiểu phần còn lại của nội dung haha. Vì vậy, xin lỗi nếu bạn nhận thấy vấn đề đó quá

2 Trình phát âm thanh độc lập -- Codepen. io

Cuối cùng, tôi đang triển khai điều này với một số tập lệnh AHK & Edge/IE, vì vậy tôi buộc phải sử dụng Legacy JS trong thời gian này

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 hạnh phúc