HTML audio autoplay not working All In One
https://music.xgqfrms.xyz/the-most-beautiful-expectation/index.html
bug
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
<script>
// js auto click play => fix: Chrome Browser 🔐 autoplay with sound limit
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
setTimeout(() => {
// hack => fix: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
document.body.click();
const app = document.querySelector(`#app`);
if(app) {
app.play();
}
}, 0);
});
</script>
Google Chrome 安全限制 🔐
https://developer.chrome.com/blog/autoplay/
https://developer.chrome.com/blog/autoplay-2/
why
https://developer.chrome.com/blog/autoplay/
https://developer.chrome.com/blog/autoplay/#web-audio
solutions ❌ no work anymore
- js auto click
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>the-most-beautiful-expectation.mp3</title>
</head>
<body>
<header>
<h1>the-most-beautiful-expectation.mp3</h1>
</header>
<main>
<article>
<!-- <figure>
<figcaption>the-most-beautiful-expectation.mp3</figcaption>
<audio
id="app"
controls
autoplay
loop
controlslist="nodownload"
src="./the-most-beautiful-expectation.mp3">
<source src="./the-most-beautiful-expectation.mp3" type="audio/mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</figure> -->
<figure>
<figcaption>the-most-beautiful-expectation.mp3</figcaption>
<audio
id="app"
controls
autoplay
loop
muted
controlslist="nodownload"
src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3">
<source src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3" type="audio/mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</figure>
</article>
<section>
<video
id="video"
title="video"
style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
autoplay
muted>
</video>
</section>
</main>
<footer>
<p>copyright© xgqfrms 2022</p>
</footer>
<script>
// js auto click play => fix: Chrome Browser 🔐 autoplay with sound limit
// ❌
// window.addEventListener('DOMContentLoaded', (event) => {
// console.log('DOM fully loaded and parsed');
// setTimeout(() => {
// // hack => fix: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
// // document.body.click();
// const app = document.querySelector(`#app`);
// if(app) {
// app.click();
// app.play();
// }
// }, 0);
// });
// ❌
// window.onload = function() {
// const app = document.querySelector(`#app`);
// if(app) {
// console.log(`app =`, app);
// // muted
// app.muted = false;
// // app.removeAttribute(`muted`);
// }
// }
window.onload = function() {
const video = document.querySelector(`#video`);
if(video) {
console.log(`video =`, video);
setTimeout(() => {
// muted
video.muted = false;
// video.removeAttribute(`muted`);
}, 1000);
setTimeout(() => {
// play
video.play();
}, 1000);
}
}
</script>
</body>
</html>
- iframe
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>the-most-beautiful-expectation.mp3</title>
</head>
<body>
<header>
<h1>the-most-beautiful-expectation.mp3</h1>
</header>
<main>
<article>
<!-- <figure>
<figcaption>the-most-beautiful-expectation.mp3</figcaption>
<audio
id="app"
controls
autoplay
loop
controlslist="nodownload"
src="./the-most-beautiful-expectation.mp3">
<source src="./the-most-beautiful-expectation.mp3" type="audio/mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</figure> -->
<!-- <iframe src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe> -->
<iframe src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/index.html" type="audio/mp3" allow="autoplay" id="audio"></iframe>
<!-- <iframe src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3" type="audio/mp3" allow="autoplay" id="audio"></iframe> -->
<figure>
<figcaption>the-most-beautiful-expectation.mp3</figcaption>
<audio
id="app"
controls
autoplay
loop
controlslist="nodownload"
src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3">
<source src="https://music.xgqfrms.xyz/the-most-beautiful-expectation/the-most-beautiful-expectation.mp3" type="audio/mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</figure>
</article>
</main>
<footer>
<p>copyright© xgqfrms 2022</p>
</footer>
<script>
// js auto click play => fix: Chrome Browser 🔐 autoplay with sound limit
// ❌
// window.addEventListener('DOMContentLoaded', (event) => {
// console.log('DOM fully loaded and parsed');
// setTimeout(() => {
// // hack => fix: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD
// // document.body.click();
// const app = document.querySelector(`#app`);
// if(app) {
// app.click();
// app.play();
// }
// }, 0);
// });
// ❌
// window.onload = function() {
// var context = new AudioContext();
// const app = document.querySelector(`#app`);
// if(app) {
// app.click();
// app.play();
// }
// }
</script>
</body>
</html>
refs
https://codepen.io/xgqfrms/pen/eYKrYBd
https://codepen.io/xgqfrms/pen/ZERoEpO
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 發佈文章使用：只允許註冊用戶纔可以訪問！
原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！