0

现在，我的网站上有这段代码：

<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925"
controls="true" 
volume="1.0">
</audio>

像这样显示默认的音频播放器。

但我想要的结果是只有播放/暂停功能。像这样的东西。

我做了一些研究，在这里找到了最接近我想要的结果的代码。我试图在我的 Wix 网站上的编辑代码窗口下运行这些代码，但似乎没有任何效果。

实现这一目标的最简单方法是什么？

我是初学者，所以任何帮助将不胜感激。提前致谢 ：）

4

2 回答 2

3

这应该有效：

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]，对于每个按钮只有一个孩子所以我们可以使用这种方法，直接孩子是我们想要播放的音频标签

现在我们检查按钮本身是否有 class fa-play，如果它确实意味着按钮还没有播放，所以我们播放它，我们删除fa-playclass 并用 class 替换它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>

于 2018-03-25T01:33:34.990 回答
2

如果您删除该属性或给它一个值，则该<audio>标签不可见。在它的地方，你可以设计一个，链接，div等作为标签的界面。注意：此代码不需要加载额外的文件，它是纯 JavaScript，并且图标是每个接受 utf-8 的浏览器和系统的标准。controlsfalse<button><audio>

演示

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>

于 2018-03-25T01:33:54.393 回答