关于javascript：播放暂停按钮切换按钮

audiocsshtmlhtml5-audiojavascript

play pause button to toggle button

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.d-table {
display:table !important;
}

.d-table-cell {
display:table-cell !important;
}

.w-100 {
width: 100% !important;
}

.tar {
text-align: left !important;
}

1
2
3
4
5
6
7
8

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

<p class="d-table-cell">?????? ??????? ???????????? ??????????
</p>

</audio>
<i class="fa fa-play-circle-o fa-2x">
<i class="fa fa-pause-circle-o fa-2x">

相关讨论

这样改变你的html

1
2
3
4
5

<p class="d-table-cell">?????? ??????? ???????????? ??????????
</p>

</audio>
<i id="icons" class="fa fa-play-circle-o fa-2x">

和JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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++;
}

相关讨论

试试这个。它将在切换以及点击时播放和暂停

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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")})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.d-table {
display:table !important;
}

.d-table-cell {
display:table-cell !important;
}

.w-100 {
width: 100% !important;
}

.tar {
text-align: left !important;
}

1
2
3
4
5
6
7
8

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

<p class="d-table-cell">?????? ??????? ???????????? ??????????
</p>

</audio>
<i id="a" class="fa fa-play-circle-o fa-2x">

相关讨论