Question

有人可以告诉我点击<div>时如何播放音频吗？
该代码可同时播放所有音频。

let containerItem = document.querySelectorAll('.container__item');
  let audio = document.querySelectorAll('.audio');
  containerItem.forEach((a)=>a.addEventListener('click',playAudio));
  function playAudio(){
  audio.forEach((a)=>a.play());
}

<div class="container__item">
  <audio class="audio" src="cry.mp3"></audio>
</div>

<div class="container__item">
  <audio class="audio" src="dance.mp3"></audio>
</div>

Answer 1

playAudio()函数在每个音频元素上应用.play()。
使用功能的this关键字选择被单击的元素，并使用querySelector仅选择其子元素（.audio元素）来启动其音频。

function playAudio() {
  this.querySelector('.audio').play();
}

Answer 2

由于您已将click事件添加到每个containerElement而不是每个音频元素，因此您需要将playAudio功能更改为此

function playAudio(){
  this.children[0].play();
}

或者您可以这样做

document.querySelector("#container").onclick = function(e) {
  if(e.target.nodeName === "I") {
    var button = e.target, audio = e.target.nextElementSibling;
    if(audio.paused) {
      audio.play();
      button.className = "fa fa-pause-circle-o";
    }else {
      audio.pause();
      button.className = "fa fa-play-circle-o";
    }
  }
}

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  width: 300px;
  background-color: lightgreen;
  border-radius: 15px;
  box-shadow: 1px 1px 2px #555;
}
.container__item {
  width: 60px;
  height: 50px;
  border-radius: 40%;
  background-color: #ccc;
  box-shadow: 0 0 50px 15px #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.container__item i {
  font-size: 35px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="container">
  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>

  <div class="container__item">
    <i class="fa fa-play-circle-o"></i>
    <audio class="audio" src="http://soundbible.com/grab.php?id=1858&type=mp3" onended="this.previousElementSibling.className = 'fa fa-play-circle-o'"></audio>
  </div>
</div>

Answer 3

您在这里：

.container__item {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid 1px
}

<div class="container__item">1
  <audio src="http://ice3.somafm.com/defcon-128-mp3" crossorigin="anonymous">
	</audio>
</div>

<div class="container__item">2
  <audio src="http://ice3.somafm.com/bagel-128-mp3" crossorigin="anonymous">
	</audio>
</div>

SQL> create or replace type societe 
       as object (nom_societe varchar2(20),ville_societe varchar2(20));
   /

create or replace type produit as object(
nom varchar2(20),
poids number(9),
couleur varchar2(20),
composants varchar2(2));
/



SQL> insert into commande(NUMERO,DATE_SOUMISSION,DATE_ENVOI,SOCIETE,PRODUIT) values(
  2  1,to_date('2013/03/11','yyyy/mm/dd'),to_date('2014/05/12','yyyy/mm/dd'),
  3  societe('BME','FES'),produit('prod1',12,'noir','aluminium'));
insert into commande(NUMERO,DATE_SOUMISSION,DATE_ENVOI,SOCIETE,PRODUIT) values(
            *
ERROR at line 1:
ORA-22814: attribute or element value is larger than specified in type


SQL> create table commande(
  2  numero number(9),
  3  date_soumission date,
  4  date_envoi date,
  5  societe societe,
  6  produit produit);

Answer 4

对于我来说，仅播放选定的声音是一个问题，最好将功能播放置于主代码之外。向div添加一个类，该类是选择的目标。播放链接到类a或b的音频。

var itemLenght= document.querySelectorAll(".container__item").length;

for (var i = 0; i < itemLenght; i++) {

    document.querySelectorAll(".container__item")[i].addEventListener("click", function(){

        var eventClass = this.classList[0];

        makeSound(eventClass);

    })
}

function makeSound(key){

    switch (key) {
        case "a":
            var audio1 = new Audio("cry.mp3");
            audio1.play();    
        break;
        
        case "b":
            var audio2 = new Audio("dance.mp3");
            audio2.play();    
        break;

        default:
            console.log(event);
        break;
    }
}

 <div class="container__item">
       <audio class="a audio " src="cry.mp3"></audio>
 </div>

 <div class="container__item">
       <audio class="b audio " src="dance.mp3"></audio>
 </div>

如何在点击时播放多音频文件

4 个答案: