Javascript / iOS-单击播放音频在iOS上不起作用

时间:2019-10-14 08:24:13

标签: javascript html ios audio onclick

我正在构建这个肮脏的小页面: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+ */
 }

0 个答案:

没有答案