Hướng dẫn how to create play pause button in html - cách tạo nút tạm dừng phát trong html

Gần đây tôi đã biết về việc nhúng âm thanh trong HTML như dưới đây.

Hiển thị một cái gì đó giống như một hình chữ nhật với các tùy chọn khác nhau trên đó như tạm dừng/chơi, tải xuống, đặt âm lượng, v.v.

Nhưng làm thế nào tôi có thể thay vì "hình chữ nhật phát âm thanh" này có một nút khi nhấp vào phát âm thanh một lần và khi nhấp vào nó trong khi âm thanh đang phát dừng lại và nhấp vào lần chơi liên tục.

Đã hỏi ngày 4 tháng 6 năm 2017 lúc 20:29Jun 4, 2017 at 20:29

Asif bí danh AliAsif Ali

Phim huy hiệu vàng 2711 Huy hiệu bạc12 Huy hiệu đồng1 gold badge3 silver badges12 bronze badges

1

Bạn có thể sử dụng JavaScript để thực hiện các hành động như vậy.

Hãy thử những điều sau đây

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

Chỉ cần thay thế các tham số cho bạn.

Đã trả lời ngày 4 tháng 6 năm 2017 lúc 20:36Jun 4, 2017 at 20:36

2

Dưới đây là một ví dụ đơn giản với JS thuần túy. Tôi đang sử dụng một lớp trên nút để biết âm thanh có phát hay không, bạn có thể sử dụng cùng một lớp cho các giao diện người dùng khác nhau khi nút trong trạng thái chơi/tạm dừng.

Liên kết: https://jsfiddle.net/p4mksfm1/

Play

Đã trả lời ngày 5 tháng 6 năm 2017 lúc 4:06Jun 5, 2017 at 4:06

Alon Zilbermanalon ZilbermanAlon Zilberman

2.0981 Huy hiệu vàng15 Huy hiệu bạc16 Huy hiệu đồng1 gold badge15 silver badges16 bronze badges

3

❮ HTML Audio/Video Dom tham khảo

Thí dụ

Một video có nút phát và tạm dừng:

var vid = document.getEuityById ("myVideo");

hàm playVID () {& nbsp; & nbsp; & nbsp; vid.play (); }
    vid.play();
}

hàm pausevid () {& nbsp; & nbsp; & nbsp; vid.Apause (); }
    vid.pause();
}

Hãy tự mình thử »

---

Định nghĩa và cách sử dụng

Phương thức tạm dừng () tạm dừng (tạm dừng) âm thanh hoặc video hiện đang phát.

Mẹo: Sử dụng phương thức Play () để bắt đầu phát âm thanh/video hiện tại. Use the play() method to start playing the current audio/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 đủ phương thức.

Phương pháp
tạm ngừng()	Đúng	9.0	Đúng	Đúng	Đúng

---

Cú pháp

Thông số

Giá trị trả về

---

❮ HTML Audio/Video Dom tham khảo

Tạm dừng () HTMLMediaElection. Phương thức tạm dừng () sẽ tạm dừng phát lại phương tiện truyền thông, nếu phương tiện đã ở trạng thái tạm dừng phương thức này sẽ không có hiệu lực.

Ở đây, phong cách cuối cùng trong SCSS:

Thử nghiệm

Biểu tượng ▶ ▶ ️ ️ là biểu tượng tiêu chuẩn (với unicode của riêng nó) để bắt đầu một phương tiện âm thanh/video cùng với phần còn lại của các biểu tượng như Stop, Pause, Fast Porward, Rewind và các phương tiện khác.

Có các tùy chọn Unicode và biểu tượng cảm xúc cho các biểu tượng nút phát, nhưng nếu bạn muốn một cái gì đó tùy chỉnh, bạn có thể với lấy một phông chữ biểu tượng hoặc tài sản tùy chỉnh. Nhưng nếu bạn muốn thay đổi giữa các biểu tượng thì sao? Điều đó có thể thay đổi được suôn sẻ không? Một giải pháp có thể là sử dụng SVG. Nhưng điều gì sẽ xảy ra nếu nó có thể được thực hiện trong 10 dòng CSS? Thật là gọn gàng như thế nào‽But what if it could be done in 10 lines of CSS? How neat is that‽

Trong bài viết này, chúng tôi sẽ xây dựng cả nút phát và nút tạm dừng với CSS và sau đó khám phá cách chúng tôi có thể sử dụng các chuyển tiếp CSS để sinh động giữa chúng.

Nút chơi

Bước một

Chúng tôi muốn đạt được một tam giác chỉ đúng. Hãy bắt đầu bằng cách làm một hộp có đường viền dày. Hiện tại, các hộp là phương pháp cơ sở ưa thích để thực hiện hình tam giác. Chúng tôi sẽ bắt đầu với một đường viền dày và màu sắc tươi sáng để giúp chúng tôi thấy những thay đổi của mình.

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Step Hai

Step two

Kết xuất một đường viền màu rắn mang lại kết quả trên. Ẩn đằng sau màu của biên giới là một mẹo nhỏ gọn gàng. Làm thế nào là biên giới được hiển thị chính xác? Hãy để thay đổi màu sắc đường viền, một cho mỗi bên, sẽ giúp chúng tôi thấy đường viền được hiển thị như thế nào.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Step ba

Step three

Tại giao điểm của mỗi biên giới, bạn sẽ nhận thấy rằng một góc độ 45 độ. Đây là một cách thú vị mà biên giới được thể hiện bởi một trình duyệt và do đó, mở ra khả năng của các hình dạng khác nhau, như hình tam giác. Như chúng ta sẽ thấy dưới đây, nếu chúng ta làm cho

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

6 đủ rộng, có vẻ như chúng ta có thể đạt được một tam giác!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Step bốn

Step four

Chà, điều đó đã làm việc như mong đợi. Như thể hộp bên trong (Div thực tế) nhấn mạnh vào việc giữ chiều rộng của nó. Lý do phải làm với thuộc tính

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

7, mặc định là giá trị

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

8. Giá trị

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

8 bảo div đặt bất kỳ đường viền nào ở bên ngoài, tăng chiều rộng hoặc chiều cao.

Nếu chúng ta thay đổi giá trị này thành

Play

0, biên giới được thêm vào bên trong hộp.

.button.play {
  ...
  box-sizing: border-box;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}

Bước

Final step

Bây giờ chúng ta có một tam giác thích hợp. Tiếp theo, chúng ta cần loại bỏ phần trên và dưới (đỏ và xanh lá cây). Chúng tôi làm điều này bằng cách đặt

Play

1 của các bên đó thành

Play

2. Chiều rộng cũng cho phép chúng ta kiểm soát hình dạng và kích thước của tam giác.

________ 8here Một hình ảnh động để giải thích rằng, nếu điều đó hữu ích.

Here’s an animation to explain that, if that’s helpful.

Nút tạm dừng

Bước một

Chúng tôi muốn đạt được một tam giác chỉ đúng. Hãy bắt đầu bằng cách làm một hộp có đường viền dày. Hiện tại, các hộp là phương pháp cơ sở ưa thích để thực hiện hình tam giác. Chúng tôi sẽ bắt đầu với một đường viền dày và màu sắc tươi sáng để giúp chúng tôi thấy những thay đổi của mình.

.button.play {
  width: 74px;
  height: 74px;
  border-style: solid;
  border-width: 37px;
  border-color: #202020;
}

Step Hai

Step two

Kết xuất một đường viền màu rắn mang lại kết quả trên. Ẩn đằng sau màu của biên giới là một mẹo nhỏ gọn gàng. Làm thế nào là biên giới được hiển thị chính xác? Hãy để thay đổi màu sắc đường viền, một cho mỗi bên, sẽ giúp chúng tôi thấy đường viền được hiển thị như thế nào.

.button.play {
  ...
  border-width: 37px 37px 37px 37px;
  border-color: red blue green yellow;
}

Step ba

Final step

Tại giao điểm của mỗi biên giới, bạn sẽ nhận thấy rằng một góc độ 45 độ. Đây là một cách thú vị mà biên giới được thể hiện bởi một trình duyệt và do đó, mở ra khả năng của các hình dạng khác nhau, như hình tam giác. Như chúng ta sẽ thấy dưới đây, nếu chúng ta làm cho

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

6 đủ rộng, có vẻ như chúng ta có thể đạt được một tam giác!

.button.play {
  ...
  border-width: 37px 0px 37px 74px;
  border-color: red blue green yellow;
}

Step bốn

Animating the Transition

Chà, điều đó đã làm việc như mong đợi. Như thể hộp bên trong (Div thực tế) nhấn mạnh vào việc giữ chiều rộng của nó. Lý do phải làm với thuộc tính

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

7, mặc định là giá trị

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

8. Giá trị

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

8 bảo div đặt bất kỳ đường viền nào ở bên ngoài, tăng chiều rộng hoặc chiều cao.

Nếu chúng ta thay đổi giá trị này thành

Play

0, biên giới được thêm vào bên trong hộp.

.button.play {
  ...
  box-sizing: border-box;
  width: 74px;
  height: 74px;
  border-width: 37px 0px 37px 74px;
}

Bước

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

3

Bây giờ chúng ta có một tam giác thích hợp. Tiếp theo, chúng ta cần loại bỏ phần trên và dưới (đỏ và xanh lá cây). Chúng tôi làm điều này bằng cách đặt

Play

1 của các bên đó thành

Play

2. Chiều rộng cũng cho phép chúng ta kiểm soát hình dạng và kích thước của tam giác.

________ 8here Một hình ảnh động để giải thích rằng, nếu điều đó hữu ích.

Nút tạm dừng

Chúng tôi sẽ tiếp tục tạo biểu tượng tạm dừng bằng cách bắt đầu với một hộp có viền dày khác vì cái trước đó hoạt động rất tốt.

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

4

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

5

Bây giờ chúng ta có một tam giác thích hợp. Tiếp theo, chúng ta cần loại bỏ phần trên và dưới (đỏ và xanh lá cây). Chúng tôi làm điều này bằng cách đặt

Play

1 của các bên đó thành

Play

2. Chiều rộng cũng cho phép chúng ta kiểm soát hình dạng và kích thước của tam giác.

________ 8here Một hình ảnh động để giải thích rằng, nếu điều đó hữu ích.

Nút tạm dừng

Làm cách nào để tạo nút phát tạm dừng trong HTML?

Làm thế nào để bạn thêm một nút phát và tạm dừng vào một video trong HTML?

Làm thế nào để bạn tạm dừng một video trong HTML?

Làm thế nào để bạn thực hiện một nút tạm dừng chơi trong CSS?