CODEWITHSUNDEEP
javascript
Thaddé Méneur
Thaddé Méneur

Reputation: 133

How to pause on self-made player

I made a music player using javascript with mainly code taken on the internet, and it's working pretty good.. except I can't pause the music, it just restarts from the beginning of the song everytime I click on the button. I want it to be played onclick, and stopped when reclicked, but I don't know how to... Hope you guys can help! :)

        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
        }
    }

This is how I call it at the end of my html file :

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

I just linked it to my button which is an svg image via this line :

onclick="clicksound.playclip()"

Do you guys have any idea ? I also would like, if I can in any way, stop the music via a mute button, if you also happen to have an idea on how to do that...

Thank you guys in advance for helping! :)

Upvotes: 1

Views: 111

Answers (1)

zer00ne
zer00ne

Reputation: 43990

Here's the DEMO

I tried the original function but it wasn't working for me so I just made an audio player from plain JS. Study this audioPlayer, take it apart, research it piece by piece and you can advance to better coding. Cutting and pasting is very limited, don't worry about trying and failing, because after 2 years, I still fail on a daily basis.

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; }

Upvotes: 1

Related Questions