Looping audio onclick with Javascript

Question

I am creating a launchpad for an assignment, and struggled to find a way to loop and audio clip on click, and then stop the audio when clicked again. I have this code but it doesn't loop atm (I'm new to Javascript so it may need explaining to me).

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Title</title>
            <link rel="stylesheet" href="css/style.css">
            <script> var one = new Audio(); var two = new Audio(); var three = new Audio(); var four = new Audio();
            var five = new Audio(); var six = new Audio(); var seven = new Audio(); var eight = new Audio();
            one.src = "files/audio/one.wav"; two.src = "files/audio/two.wav"; three.src = "files/audio/three.wav";
            four.src = "files/audio/four.wav"; five.src = "files/audio/five.wav"; six.src = "files/audio/six.wav";
            seven.src = "files/audio/seven.wav"; eight.src = "files/audio/eight.wav";
            </script>
        </head>


<div class="parent">
        <div class="item" onmousedown="one.play()">Bass</div>
        <div class="item" onmousedown="two.play()">Bass</div>
        <div class="item" onmousedown="three.play()">Bass</div>
        <div class="item" onmousedown="four.play()">Beat</div>
        <div class="item" onmousedown="five.play()">Beat</div>
        <div class="item" onmousedown="six.play()">Beat</div>
        <div class="item" onmousedown="seven.play()">Drum</div>
        <div class="item" onmousedown="eight.play()">Drum</div>
</div>

Community · Accepted Answer · 2017-05-23 11:54:59Z

3

As shown on other SO posts, the Web Audio element has a loop property you can set to true Loop audio with JavaScript and Javascript Repeating Audio

for each of your instances of Audio, you will need to set it to true. e.g.

one.loop = true;
two.loop = true;

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 22, 2017 at 9:50

Henry Lu

3811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Looping audio onclick with Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related