CODEWITHSUNDEEP
javascripthtmlcss
lost_cold_soul
lost_cold_soul

Reputation: 9

How do we add a looping music for webpage in html?

I'm trying to add background music to my game but it's not working out I want it to keep looping even if I move to the second page how can I fix it?

here is what i tried so far :

<!DOCTYPE html>
  <html lang="en">
   <canvas id="bg"></canvas>

<head>
     <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
     <script type="text/javascript" src="Homepage.js"></script>
     <embed src="https://www.youtube.com/watch?v=-6nzGfMla-k&feature=youtu.be" autostart="true" loop="true"
       width="2" height="0"></embed>
</head>

Upvotes: 0

Views: 611

Answers (2)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You cannot embed a YouTube video using the <embed> tag. You could use the YouTube IFrame Player API instead. Set the autoplay and loop properties of the playerVars object to 1 and the playlist property to the same ID as videoId.

However, browsers use different strategies to decide whether a web page is allowed to autostart media or not. A certain amount of user interaction has to have taken place already in order to allow it. What you can do is start the music the first time the user interacts by clicking an element on the page. That could be a button that starts the game, a select list the user selects game options from, etc. For this demonstration, I bound to the click event of the whole document.

As the YouTube JS API doesn't seem to work inside Stack snippets, please see this codepen.

Note: Chrome seems to have some issues with this code running in codepen as well. But putting it into a file and uploading it to a server and running it from there, I was able to get it working consistently. The first time via a click anywhere on the document, and on the following page loads via autoplay. 

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('playerWrapper', {
    height: '0',
    width: '0',
    videoId: '-6nzGfMla-k',

    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'autohide': 1,
      'enablejsapi': 1,
      'loop': 1,
      'disablekb': 1,
      'fs': 0,
      'modestbranding': 0,
      'showinfo': 0,
      'color': 'white',
      'theme': 'light',
      'rel': 0,
      'playlist': '-6nzGfMla-k'
    },
    events: {
      'onReady': function onPlayerReady(ev) {
        ev.target.playVideo();
      }
    }
  });
}

function startBgMusic() {
  player.playVideo()
  document.removeEventListener('click', startBgMusic);
}

document.addEventListener('click', startBgMusic);
<script src="https://www.youtube.com/iframe_api"></script>
<div id="playerWrapper"></div>
This will not work in the Stack snippet preview, please see the linked code pen above!

Upvotes: 1

Ahmed Ali
Ahmed Ali

Reputation: 1966

I suggest you that download that youtube's video audio from Here just enter video link and download the audio and save it and give it in <source>, src attribute.
Create audio like this and add autoplay and set loop to true.

   <audio autoplay loop="true">
      <source src="yourSong.mp3" type="audio/mpeg">
    </audio>

Upvotes: 1

Related Questions