0

On a single toggled audio button: the button will play but does not pause the audio file. It replays the audio atop of the already playing sound. I realize that much of my code is sloppy at best, but I truly am new and am working with sampled files and my own ideas. Your help is very much appreciated.

|| Soundtrack Score (2013) 

<script>
    var audio, audioPlayBtn;
    function controlAudio(){
    //set object references
    audio = new Audio('./music/HolyWaterFaster.mp3');
                                                                
    audioPlayBtn = document.getElementById("audioPlayPauseBtn");
  
  //add event listeners
 audioPlayBtn.addEventListener("click",audioScore(),false);
                                                            }
    function audioScore(){
        if (audio.paused){
        audio.play();
        audioPlayBtn.innerHTML = "&#9658; Soundtrack Score (2013)";
        audioPlayBtn.style.color = "white";
    }else{
        audio.pause();
        audioPlayBtn.innerHTML = "||";
        audioPlayBtn.style.color = "beige";
    }}
    document.onload =  controlAudio;
</script>
<style>
    .musicInitializerBtn {
        border-top:7px solid gold;
        border-radius:70%;
    cursor:pointer;
    color:#444;
    font-size:1.06rem;
    font-weight:900;
    padding:4px;
    padding-top:0;
    padding:bottom:0;
    background:orange;
  }
    .musicInitializerBtn:hover{
        color:#000;
        }
</style>
                                                        
<button onclick="controlAudio()" id="audioPlayPauseBtn" class="musicInitializerBtn">
  || Soundtrack Score (2013)</button>
JavaTheHut
  • 1
  • 1
  • Duplicate of [addEventListener calls the function without me even asking it to](/q/16310423/4642212). `addEventListener` expects a function as its second argument. `audioScore()` isn’t a function. – Sebastian Simon Sep 04 '21 at 18:17
  • There are much better alternatives to assigning to `document.onload`. The best one would probably be to specify your ` – Sebastian Simon Sep 04 '21 at 18:22
  • Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Sep 04 '21 at 18:28
  • Sebastian Simon thank you so much for your input. I read the link you suggested but I can't see the issue. I did; however, remove the defunct onclick handler and added the type="module" to the script tag and removed the onload line at the end of the script. I also interpreted your suggestion of audioScore not being a function as a cue to remove the function wrapper. Unfortunately, there is still something wrong. In-fact, the audio won't even play. Are there any other suggestions that you may have to offer? P.S. This process is fun. I know that I am going to learn so much from you guys. Thx. – JavaTheHut Sep 04 '21 at 20:00
  • _“audioScore not being a function”_ — No, that’s the point: `audioScore` _is_ a function. `audioScore()` is not a function; it’s `undefined`. You need `audioPlayBtn.addEventListener("click", audioScore, false);`. – Sebastian Simon Sep 04 '21 at 21:26

0 Answers0