javascript - 如何在自制播放器上暂停

Question

我使用javascript制作了一个音乐播放器，主要是在互联网上获取的代码，它运行得很好..除了我无法暂停音乐，每次我单击按钮时它都会从歌曲的开头重新开始。我希望它在单击时播放，并在重新单击时停止，但我不知道如何...希望你们能提供帮助! :)

        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

这是DEMO

我尝试了原来的功能，但它对我不起作用，所以我只是用纯 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; }