Hướng dẫn how do i autoplay audio in html? - làm cách nào để tự động phát âm thanh trong html?

Chặn tự động và tự động phát

Thuật ngữ Autoplay đề cập đến bất kỳ tính năng nào khiến âm thanh bắt đầu phát mà không cần người dùng yêu cầu phát lại đó bắt đầu. Điều này bao gồm cả việc sử dụng các thuộc tính HTML cho phương tiện AutoPlay cũng như người dùng mã JavaScript để bắt đầu phát lại bên ngoài bối cảnh xử lý đầu vào của người dùng.autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the user of JavaScript code to start playback outside the context of handling user input.

Điều đó có nghĩa là cả hai điều sau đây đều được coi là hành vi tự động phát và do đó phải tuân theo chính sách chặn tự động phát của trình duyệt:

<audio src="/music.mp3" autoplay>audio>

và

Các tính năng web và API sau đây có thể bị ảnh hưởng bởi việc chặn Autoplay:

• Các yếu tố HTML

  <video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>
  

  0 và

  <audio id="musicplayer" autoplay>
    <source src="/music/chapter1.mp3" />
  audio>
  

  9
• API âm thanh web

Từ quan điểm của người dùng, một trang web hoặc ứng dụng tự phát bắt đầu gây ồn ào mà không có cảnh báo có thể bị chói tai, bất tiện hoặc không phù hợp. Do đó, các trình duyệt thường chỉ cho phép tự động phát xảy ra thành công trong các trường hợp cụ thể.

Tính khả dụng tự động

Theo nguyên tắc chung, bạn có thể cho rằng phương tiện truyền thông sẽ chỉ được phép tự động phát nếu ít nhất một trong những điều sau đây là đúng:

• Âm thanh bị tắt hoặc âm lượng của nó được đặt thành 0
• Người dùng đã tương tác với trang web (bằng cách nhấp, khai thác, nhấn phím, v.v.)
• Nếu trang web đã được đưa vào danh sách cho phép; Điều này có thể tự động xảy ra nếu trình duyệt xác định rằng người dùng tham gia vào phương tiện thường xuyên hoặc thủ công thông qua các tùy chọn hoặc các tính năng giao diện người dùng khác
• Nếu chính sách tính năng Autoplay được sử dụng để cấp hỗ trợ Autoplay cho

  <video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>
  

  2 và tài liệu của nó.

Nếu không, phát lại có thể sẽ bị chặn. Các tình huống chính xác dẫn đến việc chặn và các chi tiết cụ thể về cách các trang web được liệt kê cho phép thay đổi từ trình duyệt đến trình duyệt, nhưng trên là những hướng dẫn tốt để thực hiện.

Để biết chi tiết, hãy xem các chính sách chơi tự động cho Google Chrome và WebKit.

Lưu ý: Đặt một cách khác, phát lại bất kỳ phương tiện nào bao gồm âm thanh thường bị chặn nếu phát lại được khởi tạo theo chương trình trong một tab chưa có bất kỳ tương tác người dùng nào. Các trình duyệt cũng có thể chọn chặn trong các trường hợp khác. Put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. Browsers may additionally choose to block under other circumstances.

Bây giờ chúng tôi đã đề cập đến việc tự động phát là gì và những gì có thể ngăn chặn tự động được phép, chúng tôi sẽ xem xét cách trang web hoặc ứng dụng của bạn có thể tự động phát phương tiện khi tải trang, cách phát hiện khi tự động phát không xảy ra và các mẹo để đối phó Khi autoplay bị từ chối bởi trình duyệt.

Thuộc tính autoplay

Cách đơn giản nhất để tự động phát nội dung là thêm thuộc tính

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

• Trang được phép sử dụng chức năng tự động phát
• Phần tử đã được tạo trong quá trình tải trang
• Đủ truyền thông đã được nhận để bắt đầu phát lại và tiếp tục chơi cho đến cuối phương tiện truyền thông mà không bị gián đoạn, giả sử không có thay đổi đáng kể về hiệu suất mạng hoặc băng thông.

Ví dụ: Thuộc tính autoplay

Một phần tử

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Ví dụ 2: Phát hiện lỗi tự động

Nếu bạn dựa vào AutoPlay cho bất cứ điều gì quan trọng, hoặc nếu lỗi Autoplay sẽ ảnh hưởng đến ứng dụng của bạn theo bất kỳ cách nào, có lẽ bạn sẽ muốn có thể biết khi Autoplay không bắt đầu. Thật không may, trong trường hợp thuộc tính

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một cách tiếp cận tốt hơn, nếu bạn có thể điều chỉnh hướng bạn nhìn vào mọi thứ, thay vào đó là dựa vào việc biết rằng phát lại phương tiện truyền thông đã bắt đầu thành công, thay vì khi nó không bắt đầu. Bạn có thể làm điều này một cách dễ dàng, bằng cách lắng nghe sự kiện

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

Sự kiện

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

Hãy xem xét HTML này cho một yếu tố truyền thông:

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Ở đây chúng tôi có một phần tử

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

Sau khi nhận được tham chiếu đến phần tử video từ

document.querySelector("video").play();

document.querySelector("video").play();

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

document.querySelector("video").play();

let hasPlayed = false;
function handleFirstPlay(event) {
  if (!hasPlayed) {
    hasPlayed = true;

    const vid = event.target;

    vid.onplay = null;

    // Start whatever you need to do after first playback has started
  }
}

Tại thời điểm này, trang web hoặc ứng dụng của bạn có thể bắt đầu bất cứ điều gì cần làm mà phụ thuộc vào video đã được khởi động.

Lưu ý: Cách tiếp cận này không phân biệt giữa autoplay và người dùng bắt đầu phát lại thủ công. This approach doesn't differentiate between autoplay and the user starting playback manually.

Phương thức play ()

Thuật ngữ "autoplay" cũng đề cập đến các kịch bản trong đó một tập lệnh cố gắng kích hoạt phát lại phương tiện bao gồm âm thanh, bên ngoài bối cảnh xử lý sự kiện đầu vào của người dùng. Điều này được thực hiện bằng cách gọi phương thức

document.querySelector("video").play();

Lưu ý: Bạn nên sử dụng thuộc tính

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Ví dụ: Phát video

Ví dụ đơn giản này chơi phần tử

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

document.querySelector("video").play();

document.querySelector("video").play();

Ví dụ: Xử lý các thất bại ()

Việc phát hiện sự thất bại của phương tiện truyền thông tự động khi bạn sử dụng phương thức

document.querySelector("video").play();

document.querySelector("video").play();

let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined) {
  startPlayPromise
    .then(() => {
      // Start whatever you need to do only after playback
      // has begun.
    })
    .catch((error) => {
      if (error.name === "NotAllowedError") {
        showPlayButton(videoElem);
      } else {
        // Handle a load or playback error
      }
    });
}

Bạn có thể sử dụng mã như thế này để hoàn thành công việc:

let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined) {
  startPlayPromise
    .then(() => {
      // Start whatever you need to do only after playback
      // has begun.
    })
    .catch((error) => {
      if (error.name === "NotAllowedError") {
        showPlayButton(videoElem);
      } else {
        // Handle a load or playback error
      }
    });
}

Điều đầu tiên chúng tôi làm với kết quả của

document.querySelector("video").play();

let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined) {
  startPlayPromise
    .then(() => {
      // Start whatever you need to do only after playback
      // has begun.
    })
    .catch((error) => {
      if (error.name === "NotAllowedError") {
        showPlayButton(videoElem);
      } else {
        // Handle a load or playback error
      }
    });
}

document.querySelector("video").play();

let startPlayPromise = videoElem.play();

if (startPlayPromise !== undefined) {
  startPlayPromise
    .then(() => {
      // Start whatever you need to do only after playback
      // has begun.
    })
    .catch((error) => {
      if (error.name === "NotAllowedError") {
        showPlayButton(videoElem);
      } else {
        // Handle a load or playback error
      }
    });
}

Nếu lời hứa được trả lại bởi

document.querySelector("video").play();

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Sau đó, chúng tôi thêm một người xử lý

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Bất kỳ lỗi nào khác được xử lý khi thích hợp.

Nếu bạn muốn bắt đầu phát video sau khi tương tác đầu tiên với trang,

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Tự động sử dụng API âm thanh web

Trong API âm thanh web, một trang web hoặc ứng dụng có thể bắt đầu phát âm thanh bằng phương thức

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Chính sách tính năng Autoplay

Ngoài việc quản lý và kiểm soát phía trình duyệt đối với chức năng autoplay được mô tả ở trên, một máy chủ web cũng có thể thể hiện sự sẵn sàng cho phép autoplay hoạt động. Chỉ thị

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Feature-Policy: autoplay 'self'

Bạn cũng có thể chỉ định

Feature-Policy: autoplay 'self'

Feature-Policy: autoplay 'self'

Lưu ý: Chính sách tính năng được chỉ định áp dụng cho tài liệu và mỗi

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'

Khi sử dụng thuộc tính

Feature-Policy: autoplay 'self'

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'

Ví dụ: Chỉ cho phép autoplay từ miền của tài liệu

Để sử dụng tiêu đề

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Feature-Policy: autoplay 'self'

Để làm điều tương tự cho một

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<iframe src="mediaplayer.html" allow="autoplay 'src'"> iframe>

Ví dụ: Cho phép chế độ tự động phát và toàn màn hình

Thêm quyền API toàn màn hình vào ví dụ trước đó dẫn đến tiêu đề

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

Feature-Policy: autoplay 'self'; fullscreen

Các quyền tương tự, được nghiền bằng cách sử dụng thuộc tính

Feature-Policy: autoplay 'self'

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Ví dụ: Cho phép tự động phát từ các nguồn cụ thể

Tiêu đề

let playAttempt = setInterval(() => {
  videoElem
    .play()
    .then(() => {
      clearInterval(playAttempt);
    })
    .catch((error) => {
      console.log("Unable to play the video, User has not interacted yet.");
    });
}, 3000);

<iframe src="mediaplayer.html" allow="autoplay 'src'"> iframe>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Ví dụ: Vô hiệu hóa tự động

Đặt chính sách tính năng

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Feature-Policy: autoplay 'self'

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Sử dụng thuộc tính

Feature-Policy: autoplay 'self'

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Thực hành tốt nhất

Mẹo và khuyến nghị thực hành tốt nhất để giúp bạn tận dụng tối đa việc làm việc với Autoplay được cung cấp ở đây.

Xử lý lỗi Autoplay với các điều khiển phương tiện

Một trường hợp sử dụng phổ biến cho autoplay là tự động bắt đầu phát một video clip đi cùng với một bài viết, quảng cáo hoặc xem trước chức năng chính của trang. Đối với các video Autoplay như thế này, bạn có hai tùy chọn: Không có bản nhạc âm thanh hoặc có bản nhạc âm thanh nhưng định cấu hình phần tử

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Phần tử video này được cấu hình để bao gồm các điều khiển người dùng (thường phát/tạm dừng, chà qua dòng thời gian, điều khiển âm lượng và tắt tiếng của video); Ngoài ra, do thuộc tính

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Feature-Policy: autoplay 'self'; fullscreen

Tùy chọn cấu hình trình duyệt

Trình duyệt có thể có sở thích kiểm soát cách xử lý tự động phát hoặc cách xử lý chặn tự động phát. Ở đây, bất kỳ sở thích nào như vậy có thể có ý nghĩa hoặc tầm quan trọng đặc biệt đối với bạn khi một nhà phát triển web được liệt kê. Chúng bao gồm bất kỳ có thể hỗ trợ thử nghiệm hoặc gỡ lỗi cũng như bất kỳ điều gì có thể được đặt theo cách mà bạn cần chuẩn bị để xử lý.

Firefox

Feature-Policy: autoplay 'self'; fullscreen

Một sở thích boolean chỉ định liệu thuộc tính

Feature-Policy: autoplay 'self'; fullscreen

Feature-Policy: autoplay 'self'; fullscreen

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'; fullscreen

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Sở thích boolean này, nếu

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'; fullscreen

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một sở thích boolean mà nếu

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Feature-Policy: autoplay 'self'; fullscreen

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một sở thích boolean cho biết có nên áp dụng chặn tự động chặn cho API âm thanh web hay không. Mặc định là

Feature-Policy: autoplay 'self'; fullscreen

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một ưu tiên số nguyên chỉ định liệu cấu hình trên mỗi miền cho hỗ trợ autoplay theo mặc định (

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một ưu tiên Boolean kiểm soát việc phát hiện ra các cử chỉ của người dùng có được phép ghi đè cài đặt của

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

<audio id="musicplayer" autoplay>
  <source src="/music/chapter1.mp3" />
audio>

Một sở thích boolean cho biết liệu phát lại phương tiện có bị chặn hay không khi bắt đầu trên tab nền. Giá trị mặc định,

<video src="myvideo.mp4" autoplay onplay="handleFirstPlay(event)">video>

Xem thêm