如何在自制播放器上暂停

Question

我使用Java脚本制作了一个音乐播放器，其代码主要是在互联网上获取的，它的运行效果非常好..除了我无法暂停音乐之外，每次单击按钮时，它都会从歌曲的开头重新开始。 我希望它能在单击时播放，并在重新单击时停止播放，但我不知道该怎么做...希望你们能提供帮助！ :)

        var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                    audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }

这就是我在html文件末尾称呼它的方式：

    <script type="text/javascript" >var clicksound  = ss_soundbits("./snd/prudence.mp3")

我只是通过此行将其链接到我的按钮，该按钮是svg图像：

onclick="clicksound.playclip()"

你们有什么主意吗？ 我也想以任何方式通过静音按钮停止音乐，如果您也对如何做到这一点有所了解...

预先感谢你们的帮助！ :)

Answer 1

这是演示

我尝试了原始功能，但是它对我不起作用，所以我只是用纯JS制作了音频播放器。 研究这个audioPlayer，将其拆开，逐一研究，您可以进行更好的编码。 剪切和粘贴非常有限，不必担心尝试和失败，因为两年后，我仍然每天都会失败。

JS

function playAudio() {
    if (audioBox.paused) {
            audioBox.load();
      audioBox.play();
            playBtn.classList.remove("play");
        playBtn.classList.add("pause");

    } else { 
        audioBox.pause();
                playBtn.classList.remove("pause");
            playBtn.classList.add("play");
    }
}

function stopAudio() {
     audioBox.pause();
     audioBox.currentTime = 0;
     playBtn.classList.remove("pause");
     playBtn.classList.add("play");
}

function muteAudio() {
            audioBox.muted = !audioBox.muted;
            mute.classList.toggle("vol", "novol");
}

HTML

<header>&nbsp;</header>
<main>
<audio id="audioBox" controls>
    <source src="https://glvid.s3.amazonaws.com/jwp/test/111.m4a" type="audio/mp4">
</audio>
<div id="audioPanel">
    <button id="playPause" class="play" onclick="playAudio(); return false;"></button>
    <button id="stop" onclick="stopAudio(); return false;"></button>
    <button id="mute" class="vol" onclick="muteAudio(); return false;"></button>
</div>
</main>
<footer>&nbsp;</footer>

CSS

html { box-sizing: border-box; font: 500 16px/1.5 Xonsolas; height: 100%; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; text-decoration: none; list-style-type: none; }
body { background-color: #333; font-size: 15px; font-size: .95rem;
color: #FFF; -webkit-font-smoothing: antialiased; height: 100vh; width: 100vw; }
main { width: 100%; height: 101%; color: #fff; background: #222; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; position: relative; }
#audioBox { width: 20%; height: 5.5em; }
#audioPanel { width: 20%; height: 50px; display: table-row; border: 1px solid #777; background: transparent; border-radius: 12px; }
#playPause, #stop, #mute { font-size: 1.5rem; color: #0FF; cursor: pointer; pointer-events: auto; border: 1px solid #00d; background: #333; display: table-cell; height: 50px; width: 50px; outline: none; }
#playPause { border-bottom-left-radius: 12px; border-top-left-radius: 12px; padding-bottom: 5px; }
#stop:after { content: '\25A0' }
.vol:after { content: '\2261' }
.novol:after { content: '__' }
#playPause:hover, #stop:hover, #mute:hover { color: #000; background: #0DD; }
.play:after { content: '\25B6' }
.pause:after { content: '\25AE\25AE'; font-size: 1.25rem; }