Question

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

<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>
        <br>
        <br>
         <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>
    <br>
    <span class="fa fa-stop"></span>

这个Javascript：

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

                    })
                })
            })
        })

在跑步时，它形成一个外部的＆＃34;暂停＆＃34;按钮可暂停正在播放的其他音频播放器。像this一样。但我想删除暂停按钮并暂停播放按钮本身的音频。

我尝试删除let stop = document.querySelector('.fa-stop')，但这只会停止播放音频。解决这个问题的最简单方法是什么？

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

Answer 1

您的代码很难理解，所以我从头开始编写js。我认为这是不言自明的：

<ul>
  <li><input type="checkbox" class="grid-item">One</li>
  <li><input type="checkbox" class="grid-item">Two</li>
  <li><input type="checkbox" class="grid-item">Three</li>
</ul>

如何删除外部暂停按钮？

1 个答案: