CODEWITHSUNDEEP
javascripthtmlwebaudio
mobin madadi
mobin madadi

Reputation: 23

Audio() tag in JavaScript

My code is as follows, but not executable! And anything that clicks on the play button doesn't run

HTML:

<button id="play"><img id="playicon" src="img/Polygon 1.svg"></button>

JS: 'song0' is a variable sound and sounds in 'playPauseEvent' and out of function but does not work in performance, I found this method on the following site

https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial

var playpause, play1icon, song0;

function aslekar(){
    song0 = new Audio('audio/Meydoon.mp3');
    song0.loop = true;
    song0.play();

    document.getElementById("moon");
    play1icon = document.getElementById("playicon");
    playpause = document.getElementById("play");

    playpause.addEventListener("click", playPauseEvent);

    function playPauseEvent(){
        if(song0.paused){
            song0.play();

            play1icon.setAttribute("src", "img/Polygon 1.svg");
        }else{
            song0.pause();

            play1icon.setAttribute("src", "img/Group 1.svg");
        }
    }
}
window.addEventListener("load", aslekar);

I am very beginner and hope you can help with this :)

Upvotes: 2

Views: 72

Answers (1)

Hasan Haghniya
Hasan Haghniya

Reputation: 2535

Check this Live Preview

var playpause, play1icon, song0;

function aslekar(){
song0 = new Audio('https://gamepedia.cursecdn.com/dota2_gamepedia/d/db/Vo_crystalmaiden_cm_kill_07.mp3');
song0.loop = true;
song0.play();

document.getElementById("moon");
play1icon = document.getElementById("playicon");
playpause = document.getElementById("play");

playpause.addEventListener("click", playPauseEvent);

function playPauseEvent(){
    if(song0.paused){
        song0.play();

        play1icon.setAttribute("src", "https://image.flaticon.com/icons/svg/64/64485.svg");
    }else{
        song0.pause();

        play1icon.setAttribute("src", "https://image.flaticon.com/icons/svg/27/27223.svg");
    }
}
}
   window.addEventListener("load", aslekar);

and the html 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="play" onclick="playPauseEvent()"><img id="playicon" src="https://image.flaticon.com/icons/svg/27/27223.svg" width="30" height="30"></button>
</body>
</html>

Upvotes: 2

Related Questions