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

Question

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

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

显示默认音频播放器，如 this。

但我想要的结果是只有 play/pause 功能。类似于 this.

我做了一些研究，找到了最接近我期望结果的代码 here。我尝试运行我的 Wix 网站上 编辑代码 window 下的这些代码，但似乎没有任何效果。

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

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

Answer 1

这应该有效：

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>

然后我们创建一个简单的函数 return 在一个数组中的所有兄弟元素（使用 es6 特性）：

function getAllSiblings(el){
            let parent = el.parentElement
            let children = Array.from(parent.children)
            let siblings = children.filter(child => {
                return child !== el
             })
            return siblings
        }

然后我们捕获所有音频标签并将它们放入类似 object 和 let buttons = document.querySelectorAll('.trigger-audio')

的数组中

现在循环遍历这个集合，并为集合中的每个元素（也就是每个按钮）附加一个点击事件监听器，一旦按钮被点击：

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

然后我们抓到他的直接children：let audio = button.children[0]，每个按钮只有一个children所以我们可以用这个方法，直接children就是我们要播放的音频标签

现在我们检查按钮本身是否有class fa-play，如果有意味着按钮还没有播放，所以我们播放它，我们删除fa-play class 并将其替换为 fa-pause class，我们也禁用了他所有的兄弟姐妹。因此，如果当前按钮正在播放，则不会播放它们。

反之，如果按钮有class fa-pause表示该按钮正在播放，我们对其进行逆操作：

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

当然这是一个简单的实现，如果想要更先进、更强大的实现，我建议查看 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>

动态切换play/pause

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>

Answer 2

如果您删除 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>

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

How to make a simple play/pause audio player on a Wix website?

html

javascript

velo

演示