加载 div 时自动播放音频答案

【问题标题】：Play audio automatically when a div loads加载 div 时自动播放音频
【发布时间】：2020-07-11 07:08:28
【问题描述】：

我有一个包含多个 div 的 HTML 页面，每个 div 在单击下一个按钮时加载。我需要在加载 div 时自动播放音频。并在下一个 div 加载时停止/暂停上一个音频。如何做到这一点？

<script>
  function next() {
    var qElems = document.querySelectorAll("#questions>div");
    for (var i = 0; i < qElems.length; i++) {
      if (qElems[i].style.display != "none") {
        qElems[i].style.display = "none";
        if (i == qElems.length - 1) {
          qElems[0].style.display = "block";
        } else {
          qElems[i + 1].style.display = "block";
        }
        break;
      }
    }
  }
</script>

  * {box-sizing: border-box;}
    .column {float: left; width: 50%; padding: 10px;}
    .row: after {content: ""; display: table; clear: both;}

<body>
  <div id="questions">
    <div class="row" id="d002" style="display: none;">
      <hr />
      <div class="column" style="text-align: center;">
        <img class="img-responsive" src="images/img_02.jpg" />
      </div>
      <div class="column">
        <audio src="audio/02.mp3" controls></audio>
        <p>Long time ago, .....</p>
      </div>
      <div style="text-align: right;">
        <button onclick="next()">Next</button>
      </div>
    </div>
    <div class="row" id="d003" style="display: none;">
      <hr />
      <div class="column" style="text-align: center;">
        <img class="img-responsive" src="images/img_03.jpg" />
      </div>
      <div class="column">
        <audio src="audio/03.mp3" controls></audio>
        <p>One .... lived nearby.</p>
      </div>
      <div style="text-align: right;">
        <button onclick="next()">Next</button>
      </div>
    </div>
  </div>

  <script src="jquery.min.js"></script>
</body>

请帮忙

更新：我做了一些更改。现在我可以自动播放第一个纯音频。如何将这些应用于所有音频。另外，我无法停止之前的音频。

在音频标签内添加：onloadeddata="this.play();" playsinline muted controls></audio>
和内部 next() : document.getElementById("myAudio").muted = false;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="jquery.min.js"></script>
<script>
function next() {
    var qElems = document.querySelectorAll("#questions>div");
        for (var i = 0; i < qElems.length; i++) {
            if (qElems[i].style.display != "none") {
            qElems[i].style.display = "none";
            if (i == qElems.length - 1) {
                qElems[0].style.display = "block";
        
            } else {
                qElems[i + 1].style.display = "block";
            }
            break;
        }
    }
    document.getElementById("myAudio").muted = false;
}
</script>
<style>
@font-face {font-family: 'manjari'; src: url('font/manjari.ttf') format('truetype'); font-weight: normal; font-style: normal;}
body {font-family: manjari; font-size: 38px;}
* {box-sizing: border-box;}
.column {float: left; width: 50%; padding: 10px;}
.row: after {content: ""; display: table; clear: both;}
</style>
</head>
<body>
<div id="questions">
 <div class="row" id="d001">
 <hr>
 <div class="column" style="text-align: center;"><img class="img-responsive" src="images/img_01.jpg"></div>
 <div class="column">
 <audio src="audio/01.mp3" controls autoplay></audio>
 <h2>title</h2>
 <p>text</p>
 </div>
 <div style="text-align: right;"><button onclick="next()">Next</button></div>  
 </div>
<div class="row2" id="d002" style="display: none;">
 <hr>
 <div class="column" style="text-align: center;"><img class="img-responsive" src="images/img_02.jpg"></div>
 <div class="column">
<audio id="myAudio" src="audio/02.mp3"  onloadeddata="this.play();" playsinline muted controls></audio>
 <p>some text</p>
 </div>
 <div style="text-align: right;"><button onclick="next()">Next</button></div>
 </div>
<div class="row" id="d003" style="display: none;">
 <hr>
 <div class="column" style="text-align: center;"><img class="img-responsive" src="images/img_03.jpg"></div>
 <div class="column">
 <audio id="myAudio" src="audio/03.mp3"  onloadeddata="this.play();" playsinline muted controls></audio>
 <p>some text...</p>
 </div>
 <div style="text-align: right;"><button onclick="next()">Next</button></div>
 </div>
</div>
</body>
</html>

现在的疑问是：

如何在 chrome 浏览器中对所有音频应用此自动播放？
如何在播放时停止上一个音频？

【问题讨论】：

您是否尝试过使用play 方法（documentation）？

标签： javascript html jquery

【解决方案1】：

由于jQuery包含在HTML中，使用它来修改next函数

<script>
    function next(){
      if($(this).closest('.row').next('.row').length){
        $(this).closest('.row').find('audio')[0].pause();
        $(this).closest('.row').hide();
        $(this).closest('.row').next('.row').show();
        $(this).closest('.row').next('.row').find('audio')[0].play();
      }
    }
</script>

现在，可以通过两种方式处理第一个元素。首先，你可以在body元素的末尾包含这个

 <script>
    $('.row#d002').show();  // using d002 id here, replace it with id of first element with class='row'
    $('.row#d002').find('audio')[0].play();
</script>

否则，您可以在第一个 audio 元素中添加 autoplay 属性，并使用 class='row' 从第一个元素中删除 display:none

【讨论】：

您好，点击显示div功能被禁用，音频也无法播放。