CODEWITHSUNDEEP
javascripthtmlcss
nass100
nass100

Reputation: 23

Disable autoplay on audio in html and/or javascript

I'm new to coding & new to stackoverflow! I've got about 30 hours of coding under my belt so far and my efforts are what you might call the 'Frankenstein Method'. Hopefully I can get some advice and a solution to my problem...

So... I'm attempting to build a website & I've managed to code an audioplayer with a playlist using HTML5, CSS and javascript BUT the audio plays automatically when the page opens and I don't want this to happen!

I've tried using various snippets such as autoplay="false" and autostart="false" in the HTML and javascript but nothing seems to be working. Please help!

I've attached my code for reference - all feedback is welcome as I'm keen to learn but as mentioned I am new to coding and need to improve my skills fast!

Thank you in advance!

// P1.js
function audioPlayer(){
        var currentSong = 0;
        $("#audioPlayer")[0].src = $("#playlist li a")[0];
        $("#audioPlayer")[0].play();
        $("#playlist li a").click(function(e){
           e.preventDefault(); 
           $("#audioPlayer")[0].src = this;
           $("#audioPlayer")[0].play();
           $("#playlist li").removeClass("current-song");
            currentSong = $(this).parent().index();
            $(this).parent().addClass("current-song");
        });

        $("#audioPlayer")[0].addEventListener("ended", function(){
           currentSong++;
            if(currentSong == $("#playlist li a").length)
                currentSong = 0;
            $("#playlist li").removeClass("current-song");
            $("#playlist li:eq("+currentSong+")").addClass("current-song");
            $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
            $("#audioPlayer")[0].play();
        });
    }

// Inline script

// loads the audio player
audioPlayer("P1.js");
.playernh {
    position: absolute;
    left: 400px;
    top: 1050px;
    list-style: none;
    height:75px;
    width:400px;
    background-color: pink;
}
#playlist li a {
    font-family: "Courier New";
    font-size: 24px;
    background-color: red;
    color:black;
    text-decoration: none;
}
#playlist .current-song a {
    color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playernh">

<audio id="audioPlayer" controls="controls">
    Sorry, your browser doesn't support html5!
</audio>
<ul id="playlist">
    <li class="current-song"><a href="Schietwetter - Naked Healer - 01 Naked Healer.mp3">Naked Healer</a></li>
    <li><a href="Schietwetter - Naked Healer - 02 Brown Matter.mp3">Brown Matter</a></li>
    <li><a href="Schietwetter - Naked Healer - 03 Maos.mp3">Maos</a></li>
    <li><a href="Schietwetter - Naked Healer - 04 Schwerlast.mp3">Schwerlast</a></li>
    <li><a href="Schietwetter - Naked Healer - 05 Swallow.mp3">Swallow</a></li>
    <li><a href="Schietwetter - Naked Healer - 06 Tanzer.mp3">Tanzer</a></li>
    <li><a href="Schietwetter - Naked Healer - 07 Edwards War.mp3">Edwards War</a></li>
    <li><a href="Schietwetter - Naked Healer - 08 Substanz.mp3">Substanz</a></li>
    <li><a href="Schietwetter - Naked Healer - 09 Wolfkopf.mp3">Wolfkopf</a></li>
    <li><a href="Schietwetter - Naked Healer - 10 Boni.mp3">Boni</a></li>
    <li><a href="Schietwetter - Naked Healer - 11 Moth.mp3">Moth</a></li>
</ul>
</div>

Upvotes: 2

Views: 2573

Answers (1)

AuxTaco
AuxTaco

Reputation: 5181

You call audioPlayer immediately, and audioPlayer...

function audioPlayer(){
  var currentSong = 0;
  $("#audioPlayer")[0].src = $("#playlist li a")[0];
  $("#audioPlayer")[0].play();

...immediately starts playing music. Take out the .src and .play lines there. (Leave them in the click handler, though!)

Also, audioPlayer doesn't take an argument. Once your Javascript starts running, the browser has already slammed all of your scripts together in one long mess of code. There's no notion of "p1.js" at that point.

Upvotes: 1

Related Questions