我正在构建这个肮脏的小页面:nielsboard.tk-现在,我知道iOS的自动播放规则,并且需要通过事件监听器进行变通的方法-我以为我的代码中已有这个?
单击头部时,iOS设备上没有声音播放-我该如何解决? 这是html
<div id="nielsboard">
<script>
document.body.addEventListener('click', function(e) {
var tgt = e.target;
if (tgt.tagName === "IMG") {
var audiosrc = tgt.getAttribute("data-audio");
if (audiosrc) {
var audio = new Audio(audiosrc);
audio.play();
}
}
})
for (var i = 0; i < 9; i++) {
var imgsrc = "niels" + i + ".png";
var audiosrc = i + ".ogg";
var image = document.createElement("IMG");
image.setAttribute("data-audio", audiosrc)
image.setAttribute("src", imgsrc);
document.body.appendChild(image);
}
</script>
</div>
这是CSS
body {
background-color: #212422;
background-size: cover;
background-attachment: fixed;
background-repeat: repeat;
font-family: helvetica;
padding-left: 0px;
}
h1 {
color: white;
text-align: center;
font-size: 60px;
font-weight: bolder;
}
p {
font-size: 20px;
}
ul {
margin-left: 40px;
color: white;
}
div { display: inline-block;
}
#nielsboard{
padding-left:200px;
}
img {
-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(100%); /* FF 35+ */
}
img:hover {
-webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(0%); /* FF 35+ */
}