HTML âm thanh tùy chỉnh

Về cơ bản, trình phát âm thanh HTML5 không thể được tạo kiểu nếu chúng tôi sử dụng thuộc tính “điều khiển” bên trong thẻ âm thanh. Tuy nhiên, chúng ta có thể dễ dàng tùy chỉnh giao diện trình phát nếu có chức năng điều khiển tùy chỉnh. Nếu bạn đã thử tạo kiểu cho trình phát âm thanh HTML5, bạn có thể không nhận được kết quả. Đó là do thuộc tính “điều khiển” thay thế trình phát âm thanh mặc định của trình duyệt. Vì vậy, hướng dẫn này giải thích cách bạn có thể tùy chỉnh trình phát âm thanh HTML5 bằng CSS

Trước khi bắt đầu quá trình tùy chỉnh, tôi khuyên bạn nên duyệt qua trang demo để kiểm tra trình phát âm thanh. Ở đó, tôi đã đặt hai trình phát âm thanh, một trong số đó là trình phát trình duyệt mặc định và trình phát còn lại là trình phát âm thanh tùy chỉnh CSS với các điều khiển tùy chỉnh

Chúng ta cần tạo các thẻ HTML tùy chỉnh cho giao diện trình phát âm thanh để tạo kiểu cho các phần tử này bằng CSS. Sau đó, chúng tôi sẽ lấy tất cả các phần tử này trong JavaScript và đính kèm hàm. Về cơ bản, bạn không cần xử lý mã JavaScript vì chúng tôi sẽ chia sẻ tệp JavaScript cho trình phát âm thanh tùy chỉnh. Dù sao đi nữa, bạn có thể xác định các kiểu CSS bổ sung để tùy chỉnh trình phát âm thanh theo nhu cầu của mình. Vì vậy, hãy tạo cấu trúc HTML cho trình phát âm thanh tùy chỉnh

Tạo trình phát âm thanh HTML5

Trong HTML, tạo thẻ div với lớp

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

0 sẽ được sử dụng làm vùng chứa trình phát. Tương tự, tạo các phần tử cho dòng thời gian, tiến trình, điều khiển, v.v. như được mô tả bên dưới

  

    

  
  

    

      

    
    
    

      
0:00
      
/
      

    
    
Music Song

    

      

        

      
      
      

        

      
    
  

Trong thẻ

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

1, bạn có thể thêm văn bản tùy chỉnh (tên nhạc, v.v.). Tương tự, bạn cũng có thể thêm một số thành phần bổ sung (hình thu nhỏ âm thanh, v.v.) vào HTML ở trên

Các kiểu CSS

Sau khi tạo các phần tử HTML, bây giờ chúng ta sẽ sử dụng CSS để tùy chỉnh trình phát âm thanh. Lớp

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

2 là vùng chứa của trình phát, xác định chiều rộng, chiều cao, màu nền và cỡ chữ, v.v. Tương tự, xác định bóng hộp và ẩn phần tràn. Sử dụng thuộc tính lưới hiển thị CSS trong đó chúng tôi sẽ đặt các điều khiển của trình phát

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

Tương tự như vậy, xác định phong cách cho dòng thời gian. Đặt màu nền và giữ vị trí tương đối của nó với 100% chiều rộng

.audio-player .timeline {
  background: white;
  width: 100%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 10px 0 #0008;
}

Giữ chiều rộng 0% cho thanh tiến trình, đặt màu nền và xác định chiều cao 100%

.audio-player .timeline .progress {
  background: coral;
  width: 0%;
  height: 100%;
  transition: 0.25s;
}

Lớp

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

3 là nơi chứa các nút điều khiển trình phát âm thanh. Xác định kiểu CSS cho vùng chứa này như được mô tả bên dưới

________số 8

Tương tự, tạo các kiểu CSS cho nút chuyển đổi phát/tạm dừng. Bạn cũng có thể đặt biểu tượng tùy chỉnh cho các nút này theo nhu cầu của mình

.audio-player .controls .toggle-play.play {
  cursor: pointer;
  position: relative;
  left: 0;
  height: 0;
  width: 0;
  border: 7px solid #0000;
  border-left: 13px solid white;
}
.audio-player .controls .toggle-play.play:hover {
  transform: scale(1.1);
}
.audio-player .controls .toggle-play.pause {
  height: 15px;
  width: 20px;
  cursor: pointer;
  position: relative;
}
.audio-player .controls .toggle-play.pause:before {
  position: absolute;
  top: 0;
  left: 0px;
  background: white;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:after {
  position: absolute;
  top: 0;
  right: 8px;
  background: white;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:hover {
  transform: scale(1.1);
}

Bây giờ, nhắm mục tiêu lớp

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

4 hiển thị thời lượng âm thanh. Hiển thị phần tử này dưới dạng CSS flex và xác định một số giá trị đệm

  

    

  
  

    

      

    
    
    

      
0:00
      
/
      

    
    
Music Song

    

      

        

      
      
      

        

      
    
  

1

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

5 chứa nút âm lượng và thanh trượt. Giữ vị trí tương đối và thuộc tính con trỏ con trỏ. Tương tự, đặt chiều cao cho nút âm lượng và hiển thị dưới dạng flex

  

    

  
  

    

      

    
    
    

      
0:00
      
/
      

    
    
Music Song

    

      

        

      
      
      

        

      
    
  

3

Giữ vị trí tuyệt đối cho thanh trượt âm lượng, đặt giá trị trên cùng bên trái lần lượt là 15px và -3px. Ngoài ra, hãy xác định màu nền, chiều cao và chỉ mục z như được đề cập bên dưới

  

    

  
  

    

      

    
    
    

      
0:00
      
/
      

    
    
Music Song

    

      

        

      
      
      

        

      
    
  

4

Cuối cùng, thêm tệp JavaScript (trước khi đóng thẻ body) cho các điều khiển tùy chỉnh để làm cho chúng hoạt động và hoàn tất

  

    

  
  

    

      

    
    
    

      
0:00
      
/
      

    
    
Music Song

    

      

        

      
      
      

        

      
    
  

5

Đó là tất cả. Tôi hy vọng hướng dẫn này đã giúp bạn tùy chỉnh trình phát âm thanh HTML5 bằng CSS. Nếu bạn có bất kỳ câu hỏi nào hoặc cần trợ giúp thêm, hãy cho tôi biết bằng cách bình luận bên dưới

Làm cách nào để tùy chỉnh HTML âm thanh?

Bạn có thể thêm âm thanh vào HTML không?

Làm cách nào để thêm trình phát MP3 trong HTML?