演示

Question

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

<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网站上的编辑代码窗口下运行这些代码，但似乎没有任何工作。

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

我是初学者，所以任何帮助都会受到赞赏。在此先感谢：）

Answer 1

这应该有效：

＆＃13;

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

＆＃13;

<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>

＆＃13;

多个按钮的解决方案[更新]

首先，我们将音频标签包装在容器中。

<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')

的arraylike对象中

现在循环遍历此集合以及集合的每个元素（也就是每个按钮）我们在其上附加了一个单击事件监听器，其中一旦单击该按钮：

我们得到他所有的兄弟姐妹（在我们的例子中只有一个）：let siblings = getAllSiblings(button)

然后我们抓住他的直接孩子：let audio = button.children[0]，因为每个按钮只有一个孩子，所以我们可以使用这种方法，直接孩子是我们想玩的音频标签

现在我们检查按钮本身是否具有类fa-play，如果它确实意味着该按钮尚未播放，那么我们播放它，我们删除fa-play类并将其替换为fa-pause课程，我们也禁用他的所有兄弟姐妹。因此，如果当前按钮正在播放，它们将无法播放。

相反，如果按钮具有类fa-pause，则意味着该按钮当前正在播放，我们对其进行逆操作：

恢复他兄弟姐妹的点击，
暂停音频，给按钮fa-play类

当然这是一个简单的实现，对于更高级和更强大的实现，我建议看一下MediaElement文档

＆＃13;

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

＆＃13;

<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>

＆＃13;

Dinamically切换播放/暂停

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果您删除<audio>属性或为其提供controls值，则false代码无法显示。在它的位置，您可以设计<button>，链接，div等作为<audio>标记的界面。注意：此代码不需要加载额外的文件，它是纯JavaScript，并且图标是接受utf-8的每个浏览器和系统的标准。

演示

＆＃13;

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');

  }

}

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在Wix网站上制作一个简单的播放/暂停音频播放器？

2 个答案:

演示