Question

请帮助我，将播放/暂停按钮切换为一个切换按钮意思是一次单击音频播放第二次单击，然后音频暂停并更改图标。预先感谢

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>    
<a onclick="document.getElementById('player2').play()"><i  class="fa fa-play-circle-o fa-2x"></i></a>
<a onclick="document.getElementById('player2').pause()"><i  class="fa fa-pause-circle-o fa-2x"></i></a> 
  </div>
</div>

Answer 1

尝试一下。它将在切换以及点击时播放和暂停

var posX,posY,posZ;
var scene, camera, render;
var cubeMesh,cube_Geometry, cube_Material;

class myWorld{
    /* ... Setup World ... */
    //excecute cube();
    /* ... Set/Get positions (xyz) ... */

    cube(){
        cube_Geometry = new THREE.BoxGeometry(20, 20, 20);
        cube_Material = new THREE.MeshNormalMaterial();
        cube_Mesh = new THREE.Mesh(cube_Geometry, cube_Material);
        cube_Mesh.position.set(0, 100, 100);
        scene.add(cube_Mesh);
    }

    animate(){ //loop function
        //THREE.Mesh.position.set (Three.js)
        cube_Mesh.position.set(posX, posY, posZ);
    }
}

var play = false;
var audio=document.getElementById('player2');
function toggle() {
  if (play) {
    audio.pause()
  } else {
    audio.play();
  }
};
audio.onplaying = function() {
  play = true;
};
audio.onpause = function() {
  play = false;
};
$(".w-10 >a> #a").click(function(){$(this).toggleClass("fa-play-circle-o fa-pause-circle-o")})

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

Answer 2

像这样更改您的html

<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>    
<a id="toggle-button"><i id="icons" class="fa  fa-play-circle-o fa-2x"></i></a>

  </div>
</div>

和javascript

<script>
   var count =0;
    document.getElementById("toggle-button").onclick = function() {

    console.log("hello");
        if(count%2==0){
            document.getElementById("player2").play();
            document.getElementById("icons").classList.remove("fa-play-circle-o");
            document.getElementById("icons").classList.add("fa-pause-circle-o");
        }else{
            document.getElementById("player2").pause();
            document.getElementById("icons").classList.add("fa-play-circle-o");
            document.getElementById("icons").classList.remove("fa-pause-circle-o");
        }

        count++;
    }

</script>

播放暂停按钮切换按钮

2 个答案: