现在，我的网站上有这段代码：
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
controls="true"
volume="1.0">
</audio>
其中显示默认音频播放器，如this。
但我想要的结果是只有播放/暂停功能。类似this。
我做了一些研究，找到了最接近我期望结果的代码here。我尝试在我的 Wix 网站上的 Edit Code 窗口下运行这些代码，但似乎没有任何效果。
实现这一目标的最简单方法是什么？
我是一个初学者，所以任何帮助将不胜感激。在此先感谢:)
【问题讨论】：
标签： javascript html velo
这应该可行：
let button = document.querySelector('.trigger-audio')
let audio = document.querySelector('audio')
button.addEventListener('click',() =>{
if(button.classList.contains('fa-play')){
audio.play()
button.classList.remove('fa-play')
button.classList.add('fa-pause')
}else{
audio.pause();
button.classList.remove('fa-pause')
button.classList.add('fa-play')
}
})<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<span class="trigger-audio fa fa-play">
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
volume="1.0">
</audio>
</span>多按钮解决方案[更新]
首先，我们将音频标签包装在一个容器内。
<div class="container">
<span class="trigger-audio fa fa-play">
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
volume="1.0">
</audio>
</span>
<span class="trigger-audio fa fa-play">
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor"
volume="1.0">
</audio>
</span>
</div>
然后我们创建一个简单的函数，在数组中返回一个元素的所有兄弟元素（使用 es6 特性）：
function getAllSiblings(el){
let parent = el.parentElement
let children = Array.from(parent.children)
let siblings = children.filter(child => {
return child !== el
})
return siblings
}
然后我们捕获所有音频标签并将它们放入一个带有let buttons = document.querySelectorAll('.trigger-audio') 的类数组对象中
现在，当循环这个集合时，对于集合的每个元素（也就是每个按钮），我们在其上附加一个点击事件监听器，一旦按钮被点击：
我们得到了他所有的兄弟姐妹（在我们的例子中只有一个）：let siblings = getAllSiblings(button)
然后我们捕获他的直接孩子：let audio = button.children[0]，每个按钮只有一个孩子所以我们可以使用这种方法，直接孩子是我们要播放的音频标签
现在我们检查按钮本身是否有 fa-play 类，如果确实意味着按钮还没有播放，所以我们播放它，我们删除 fa-play 类并用 fa-pause 替换它类，我们也禁用他所有的兄弟姐妹。因此，如果当前按钮正在播放，则不会播放它们。
反之，如果按钮有fa-pause类则表示该按钮当前正在播放，我们对其进行逆操作：
恢复对他的兄弟姐妹的点击，
暂停音频，
给按钮fa-play 类
当然这是一个简单的实现，为了更先进和更强大的实现，我建议查看 MediaElement 文档
function getAllSiblings(el){
let parent = el.parentElement
let children = Array.from(parent.children)
let siblings = children.filter(child => {
return child !== el
})
return siblings
}
let buttons = document.querySelectorAll('.trigger-audio')
buttons.forEach(button =>{
let siblings = getAllSiblings(button)
let audio = button.children[0]
button.addEventListener('click',function(){
if(button.classList.contains('fa-play')){
audio.play()
button.classList.remove('fa-play')
button.classList.add('fa-pause')
siblings.forEach(sibling=>{
sibling.style.pointerEvents = "none"
})
}else{
audio.pause();
button.classList.remove('fa-pause')
button.classList.add('fa-play');
siblings.forEach(sibling =>{
sibling.style.pointerEvents = "auto"
})
}
})
})
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<span class="trigger-audio fa fa-play">
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
volume="1.0">
</audio>
</span>
<span class="trigger-audio fa fa-play">
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor"
volume="1.0">
</audio>
</span>
</div>动态切换播放/暂停
function getAllSiblings(el){
let parent = el.parentElement
let children = Array.from(parent.children)
let siblings = children.filter(child => {
return child !== el
})
return siblings
}
let stop = document.querySelector('.fa-stop')
let buttons = document.querySelectorAll('.trigger-audio')
stop.addEventListener('click',function(){
buttons.forEach(button =>{
let audio = button.firstElementChild
if(!audio.paused){
audio.pause()
button.classList.add('fa-play')
button.classList.remove('fa-pause')
}
})
})
buttons.forEach(button =>{
let audio = button.firstElementChild
let siblings = getAllSiblings(button)
button.addEventListener('click',function(){
audio.play()
button.classList.remove('fa-play')
button.classList.add('fa-pause')
siblings.forEach(sibling =>{
let siblingAudio = sibling.firstElementChild
sibling.addEventListener('click',function(){
siblingAudio.play()
audio.pause()
sibling.classList.remove('fa-play')
sibling.classList.add('fa-pause')
button.classList.remove('fa-pause')
button.classList.add('fa-play')
})
})
})
})<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<span class="trigger-audio fa fa-play">
<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
volume="1.0">
</audio>
</span>
<span class="trigger-audio fa fa-play">
<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor"
volume="1.0">
</audio>
</span>
</div>
<span class="fa fa-stop"></span>【讨论】：
如果您删除 controls 属性或为其指定 false 值，则 <audio> 标记将不可见。在它的地方，你可以设计一个<button>、link、div等作为<audio>标签的接口。注意：此代码不需要加载额外的文件，它是纯 JavaScript，并且图标是每个接受 utf-8 的浏览器和系统的标准。
var btn = document.getElementById('btn');
var player = document.getElementById('player');
btn.addEventListener('click', playPause, false);
function playPause(e) {
if (player.paused || player.ended) {
player.play();
this.classList.add('playing');
this.classList.remove('paused');
} else {
player.pause();
this.classList.add('paused');
this.classList.remove('playing');
}
}#btn {
display: block;
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px ridge grey;
cursor:pointer;
outline:none
}
#btn::before {
content: '';
font-size:48px;
display:block;
margin-top:-15px;
}
#btn.paused::before {
content:'▶'
}
#btn.playing::before {
content: '⏸';
margin-left:-8.5px;
margin-top:-18px;
}<audio id='player' src='http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925'></audio>
<button id='btn' class='paused'></button>【讨论】：
em 调整大小，以便相对正确地缩放。