Làm cách nào để kiểm soát âm lượng trong JavaScript?

Trong bài đăng này, tôi sẽ chỉ cho bạn một phương pháp rất dễ dàng và hiệu quả để tạo bộ điều khiển âm lượng Video HTML5 trong JavaScript bằng thanh trượt. Sử dụng mã JavaScript này, bạn có thể điều khiển âm lượng bằng thanh trượt

Trình phát video/âm thanh HTML5 Điều khiển âm lượng bằng phím trong JavaScript

Ngoài ra, bạn có thể kiểm soát các bước tăng hoặc giảm âm lượng bằng mã JavaScript này

Vì vậy, ở đây chúng ta sẽ tạo từng thứ một

1. Place a video in a
2. Tạo trường nhập liệu với loại phạm vi
3. Tạo nút tạm dừng phát, đây là tùy chọn cho hướng dẫn này,
   Tuy nhiên, nếu bạn muốn, hãy chuyển qua Phát và tạm dừng video HTML5 bằng cách nhấn phím dấu cách trong JavaScript
   or Play/Pause Button For HTML5 Video Using JavaScript
4. Tạo một hàm JavaScript để lấy giá trị đầu vào từ trường đầu vào phạm vi làm giá trị âm lượng

Chỉ cần làm theo các bước dưới đây để hiểu làm thế nào để làm điều này

Tạo bộ điều khiển âm lượng video trong JavaScript bằng thanh trượt

Chức năng JavaScript chính

function thisVolume(volume_value)
    {
        var myvideo = document.getElementById("myvid");
        document.getElementById("vol").innerHTML=volume_value;
        myvideo.volume = volume_value / 100;
        
    }

Bây giờ hãy xem kỹ mã HTML + JavaScript đầy đủ

 
 

  

 

 
  
  


  
  Play 
  

  

 

 

 

Bạn cũng có thể quan tâm đến,

Trình phát video HTML5 tiến và lùi bằng phím mũi tên trái và phải trong JavaScript

Nút Phát/Tạm dừng cho Video HTML5 Sử dụng JavaScript

Giải trình

Đây là trường đầu vào cho thanh trượt

function thisVolume(volume_value) { 
var myvideo = document.getElementById("myvid"); 
document.getElementById("vol").innerHTML=volume_value; 
myvideo.volume = volume_value / 100; 
}

và đây là hàm JavaScript chính đang lấy giá trị từ đầu vào thanh trượt

Giá trị đang được lưu trữ trong biến volume_value

tài liệu. getElementById(“vol”). internalHTML=volume_value;

Hôm nay, trong bài đăng này, tôi sẽ chỉ cho bạn cách bạn có thể kiểm soát âm lượng trình phát video/âm thanh HTML5 từ khóa trong JavaScript

Trong hướng dẫn này, chúng tôi sẽ viết mã JavaScript để tăng và giảm âm lượng của trình phát HTML bằng các phím mũi tên lên và xuống chỉ từ bàn phím. Phím mũi tên lên sẽ tăng âm lượng và phím mũi tên xuống sẽ giảm âm lượng

Trước hết, hãy tạo trình phát HTML5 của chúng tôi

Bạn có thể thấy rằng chúng tôi đã tạo trình phát âm thanh HTML. Bây giờ, bạn không thể điều khiển hoặc tăng giảm âm lượng của trình phát này bằng cách nhấn các phím từ bàn phím. Vì vậy, ở đây chúng tôi sẽ cho phép người dùng kiểm soát âm lượng của trình phát âm thanh HTML5 bằng các phím mũi tên lên và xuống

Đầu tiên, hãy lấy phần tử âm thanh của chúng ta trong một biến JavaScript

var audio_element = document.getElementById("cs_audio");

Vì vậy, chúng tôi đã đưa phần tử âm thanh của mình vào một biến theo id của thẻ âm thanh

Bây giờ, chúng tôi sẽ sử dụng sự kiện onkeydown để phát hiện phím nào được nhấn. Trong sự kiện onkeydown , chúng tôi sẽ phát hiện xem phím mũi tên lên hay xuống được nhấn bằng cách phát hiện mã phím. Khi người dùng nhấn một trong hai phím này, chúng ta phải tăng giảm âm lượng bằng JavaScript

Dưới đây là mã JavaScript hoàn chỉnh của chúng tôi

var audio_element = document.getElementById("cs_audio");

document.onkeydown = function(event) {
    switch (event.keyCode) {
       case 38:
            event.preventDefault();
            audio_vol = audio_element.volume;
            if (audio_vol!=1) {

              try {
                  audio_element.volume = audio_vol + 0.02;
              }
              catch(err) {
                  audio_element.volume = 1;
              }
              
            }
            
          break;
       case 40:
            event.preventDefault();
            audio_vol = audio_element.volume;
            if (audio_vol!=0) {

              try {
                  audio_element.volume = audio_vol - 0.02;
              }
              catch(err) {
                  audio_element.volume = 0;
              }
              
            }
            
          break;
    }
};

Trong sự kiện onkeydown, chúng tôi phát hiện xem phím mũi tên lên hoặc xuống có được nhấn từ bàn phím hay không bằng cách kiểm tra mã phím. Mã khóa cho mũi tên lên là 38 và cho mũi tên xuống là 40

Ngoài ra, đọc

• Tạo video HTML5 ở chế độ chuyển động chậm bằng thuộc tính DOM playbackRate

Để tìm hiểu cách phát hiện phím được nhấn, tôi khuyên bạn nên đọc bài đăng này – Phát hiện phím mũi tên được nhấn trong JavaScript

Bây giờ, tùy thuộc vào phím tăng và giảm được nhấn từ bàn phím, chúng tôi đang tăng và giảm âm lượng của trình phát âm thanh/video HTML5 DOM của chúng tôi. Nếu mã khóa là 38 hoặc mũi tên lên, thì chúng tôi tăng âm lượng và nếu mã là 40, chúng tôi sẽ giảm âm lượng

Trước tiên, chúng tôi lấy số lượng người chơi trong biến JavaScript của mình. Trong mã của chúng tôi, chúng tôi đang tăng âm lượng bằng 0. 02 bước. Điều đó có nghĩa là nếu nhấn phím mũi tên lên một lần, nó sẽ tăng âm lượng lên 0. 02. Ngược lại, nếu người dùng nhấn phím giảm âm lượng thì nó sẽ giảm âm lượng xuống 0. 02. Nếu chúng ta tiếp tục giữ một trong các phím thì âm lượng sẽ tiếp tục giảm cho đến khi trở thành 0 hoặc 1

Có một điều khác tôi phải nói với bạn là phạm vi âm lượng của trình phát video/âm thanh HTML5 có phạm vi âm lượng từ 0 đến 1. 0 là giá trị âm lượng nhỏ nhất và 1 là giá trị âm lượng lớn nhất

Bạn cũng có thể nhận thấy rằng chúng tôi đã sử dụng câu lệnh bắt thử JavaScript để tránh lỗi trong nhật ký bảng điều khiển

Chà, trình phát âm thanh HTML5 của chúng tôi đã hoàn thành với điều khiển âm lượng bàn phím. Bây giờ bạn có thể chạy và kiểm tra nó trên trình duyệt của riêng mình để kiểm tra xem nó có hoạt động hay không. nếu mọi thứ bạn đã làm đúng, thì bạn sẽ có thể tăng hoặc giảm âm lượng của trình phát âm thanh HTML5 của mình

Trong ví dụ này, chúng tôi đã tạo điều khiển âm lượng cho trình phát âm thanh HTML5. Chà, mã JavaScript cũng sẽ hoạt động với trình phát video HTML5

• Nút Phát/Tạm dừng cho Video HTML5 Sử dụng JavaScript

Một phản hồi cho “Điều khiển âm lượng của trình phát video/âm thanh HTML5 bằng phím trong JavaScript”

1. Rémi nói.

   19 Tháng Tư, 2020 lúc 7. 33 giờ chiều

   Chào Faruque,

   mã của bạn hoạt động tốt với tôi, nhưng tôi chỉ có thể đặt tăng giảm âm lượng nếu tôi nhấp vào phần tử âm thanh, nếu tôi ở bên ngoài thì nó không hoạt động

   Làm cách nào để thay đổi âm lượng bằng JavaScript?

   Trong phần này, chúng ta sẽ tìm hiểu cách điều chỉnh âm lượng bằng JavaScript trong PhoneGap. .

   $('#rngVolume'). on("slidestop", function(){

   khối lượng var = tài liệu. getElementById('rngVolume'). giá trị;

   bảng điều khiển. nhật ký (âm lượng);

   người chơi. khối lượng = khối lượng;

   Làm cách nào để kiểm soát âm lượng trong JavaScript?

   Thuộc tính âm lượng đặt hoặc lấy âm lượng của âm thanh. Giá trị từ 0. 0 (im lặng) đến 1. 0 (to nhất). Số cài đặt âm lượng của âm thanh phải là một số nằm trong khoảng từ 0. 0 đến 1. 0. .

   1. 0 là âm lượng cao nhất (100%. Đây là mặc định)

   0. 5 là một nửa khối lượng (50%)

   0. 0 là im lặng (giống như tắt tiếng)

   Làm cách nào để tạo một thanh âm lượng trong js?

   JS (Babel) .

   tài liệu. addEventListener("DOMContentLoaded", () => {

   phạm vi const = tài liệu. truy vấnSelector(". đầu vào âm lượng [loại = phạm vi]");

   const barHoverBox = tài liệu. truy vấnSelector(". âm lượng. thanh-hoverbox");

   const điền = tài liệu. truy vấnSelector(". âm lượng. quán ba. điền vào thanh");

   phạm vi. addEventListener("thay đổi", (e) => {

   bảng điều khiển

   Làm cách nào để thêm âm lượng trong HTML?

   Thuộc tính khối lượng DOM Âm thanh/Video HTML .

   Định nghĩa và cách sử dụng. Thuộc tính âm lượng đặt hoặc trả về âm lượng hiện tại của âm thanh/video

   Hỗ trợ trình duyệt. Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính. Tài sản. âm lượng. .

   cú pháp. Trả về thuộc tính khối lượng. âm thanh. băng hình. âm lượng