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="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor"
                volume="1.0">
            </audio>
        </span>
        <br>
        <br>
        <br>
         <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>

这个javascript：

const audioButtons = document.querySelectorAll('.trigger-audio')
const buttonToStopAllAudios = document.querySelector('.fa-stop')

const getAudioElementFromButton = buttonElement =>
  buttonElement.querySelector('audio')

const stopAudioFromButton = buttonElement => {
  // Pause the audio
  getAudioElementFromButton(buttonElement).pause()

  // Update element classes
  buttonElement.classList.add('fa-play')
  buttonElement.classList.remove('fa-pause')
}

const playAudioFromButton = buttonElement => {
  // Pause the audio
  getAudioElementFromButton(buttonElement).play()

  // Update element classes
  buttonElement.classList.remove('fa-play')
  buttonElement.classList.add('fa-pause')
}

audioButtons.forEach(audioButton => {
  audioButton.addEventListener('click', () => {
    // I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
    const audioElement = getAudioElementFromButton(audioButton)
    const audioIsPaused = audioElement.paused

    // Stop all audios before starting this one
    audioButtons.forEach(stopAudioFromButton)

    audioIsPaused
      ? playAudioFromButton(audioButton) // Play if it's paused
      : stopAudioFromButton(audioButton) // Pause if it's playing
  })
})

buttonToStopAllAudios.addEventListener('click', () => {
  audioButtons.forEach(stopAudioFromButton)
})

在运行时，它形成两个播放/暂停音频播放器，即直播电台。与this一样。

如何让这些音频播放器看起来像this？

我不确定此处是否需要更改href的网址。

Answer 1

您可以使用font-awesome更改图标，检查索引here，也可以使用javascript和css创建动画图标。

如果您决定自己创建一个图标，请在codepen上查看example。请记住，我在那里使用了jquery，你需要将它导入到你的项目中。如果您有任何问题可以随意询问，但我建议您在此之前进行一些研究，因为您可以轻松更改图标，因为您使用的字体很棒，这是一个包含在引导程序中的图标库。

<div class="control play trigger-audio">
  <span class="left"></span>
  <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 class="right"></span>
</div>
<br>
<br>
<br>
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" volume="1.0"></audio>
  <span class="right"></span>
</div>

<style>
.control {
    border: 11.2px solid #333;
    border-radius: 50%;
    margin: 20px;
    padding: 28px;
    width: 112px;
    height: 112px;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.control,
.control .left,
.control .right,
.control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
    transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}

.control:before {
    content: "";
    height: 112px;
}

.control.pause .left,
.control.pause .right {
    margin: 0;
    border-left: 36.96px solid #333;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 96.992px;
}

.control.pause .left {
    border-right: 22.4px solid transparent;
}

.control.play .left {
    margin-left: 18.66666667px;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 0px solid transparent;
    height: 56px;
}

.control.play .right {
    margin: 0;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    height: 0px;
}

.control:hover {
    border-color: #000;
}

.control:hover .left,
.control:hover .right {
    border-left-color: #000;
}

</style>

<script>
const audioButtons = document.querySelectorAll('.trigger-audio')
const buttonToStopAllAudios = document.querySelector('.fa-stop')

const getAudioElementFromButton = buttonElement =>
    buttonElement.querySelector('audio')

const stopAudioFromButton = buttonElement => {
    // Pause the audio
    getAudioElementFromButton(buttonElement).pause()

    // Update element classes
    buttonElement.classList.add('fa-play')
    buttonElement.classList.remove('fa-pause')
}

const playAudioFromButton = buttonElement => {
    // Pause the audio
    getAudioElementFromButton(buttonElement).play()

    // Update element classes
    buttonElement.classList.remove('fa-play')
    buttonElement.classList.add('fa-pause')
}

audioButtons.forEach(audioButton => {
    audioButton.addEventListener('click', () => {
        // I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
        const audioElement = getAudioElementFromButton(audioButton)
        const audioIsPaused = audioElement.paused

        // Stop all audios before starting this one
        audioButtons.forEach(stopAudioFromButton)

        audioIsPaused
            ?
            playAudioFromButton(audioButton) // Play if it's paused
            :
            stopAudioFromButton(audioButton) // Pause if it's playing
    })
})

buttonToStopAllAudios.addEventListener('click', () => {
    audioButtons.forEach(stopAudioFromButton)
})

$('.control').on('mousedown', function() {
    $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        $('.control').toggleClass('pause play');
    }
});

$('.control').on('mousedown', function() {
    $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        $('.control').toggleClass('pause play');
    }
});
</script>

Answer 2

您可以添加此简单代码以开始自定义按钮：

.trigger-audio {
    position: relative;
    border: 1px solid;
    border-radius: 50%;
    width: 15px;
    height: 16px;
    padding: 10px 10px 10px 11px;
}

.trigger-audio:before {
    display: block;
    text-align: center;
}

然后您可以在点击，平滑效果或过渡时修改颜色。

如何制作循环播放/暂停音频播放器按钮？

2 个答案: