Html5 Audio Player works everywhere, but Google Chrome

I got my html5 audio player to work, but unfortunately when I launch it in Chrome, the audio doesn’t play. It works in Internet Explorer and Firefox though. Does anyone know why it isn’t working in Chrome?

index.html


<!DOCTYPE html>
<html ng-app ="plunker">

<head>
    <title>app</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
    <link href="menu_source/styles.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="music.js"></script>
	   <script src="example.js"></script>
    <script src="javascript/main.js"></script>
            <script src="angular.min.js"></script>
    <script>
			 angular.module('myModule', ['ui.bootstrap']);
                var player;
                var intv;
                var slider;


                window.onload = function () {


					
					document.getElementById('btnPlay').addEventListener('click', playMusic, false);
					document.getElementById('btnPause').addEventListener('click', pauseMusic, false);
					//document.getElementById('btnStop').addEventListener('click', stopMusic, false);
					document.getElementById('btnVolUp').addEventListener('click', playMusic, false);
					document.getElementById('btnVolDown').addEventListener('click', playMusic, false);
					player = document.getElementById('player');
                    slider = document.getElementById('sliderTime');
                    slider.addEventListener('change', reposition, false);
					getMusicList();
                }
	
                function reposition() {
                    player.currentTime = slider.value;
                }
				
				function volUp(){
				if(player.volume < 1){
				player.volume += 0.1;
				console.log(player.volume);
				}else{
				player.volume = 1;
				}
				}
				
				function volDown(){
				if(player.volume > 0){
				player.volume -= 0.1;
				console.log(player.volume);
				}else{
				player.volume = 0;
				}
				}
                function playMusic() {
                    player.play();
                  intv = setInterval(update, 100);
				  slider.max = player.duration;
				  }
				
				  function update(){
				  document.getElementById('songTime').innerHTML = millisToMins(player.currentTime);
				  slider.value = player.currentTime;
				  }

                function pauseMusic() {
                    player.pause();
                    clearInterval(intv);

                }
			
				function millisToMins(seconds){
				var numminutes = Math.floor ((((seconds % 31536000) % 86400) % 3600) / 60);
				var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
				if (numseconds >= 10){
				return "Time Elapsed:" + numminutes + ":" + Math.round(numseconds);
				}else
				{
				return "Time Elapsed: " + numminutes + ":0" + Math.round(numseconds);
				
				}
				}
/*
                function stopMusic() {
                    player.plause();
                    player.currentTime = 0;
                    clearInterval(myInterval);
                }
				*/ 	
				function getMusicList(){
				var parser = new DOMParser();
				xmlDocument = parser.parseFromString(xml, "text/xml");
				var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition');
				var arrayLength = elementsArray.length;
				var output = "<table>";
				for(var i = 0; i < arrayLength; i++){
				var title = elementsArray[i].getElementsByTagName('title')[o].firstChild.nodeValue;
				var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue;
				var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
				var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
				output += "<tr>";
				output += ("<td onclick='songSelect(\\"" + fileName + "\\")'>" + title + " By: " + composer + "</td>");
				output += "</tr>"
				
				}
				
				output += "</table>";
				document.getElementById('musicList').innerHTML = output;
				}
				
				function songSelect(fn)
				{
				document.getElementById('player').src = fn;
				playMusic();
				}
				
            </script>
			<style>
			#musicList td{
			border: 1px solid black;
			padding:3px;
			
			}
			#musicList td:hover{
			background-color:#990000;
			color:white;
			}
			</style>

</head>

<body>



    <div id="content">

    </div>
    <div id="content1">
        <div id="audioPlayer">
            <audio id="player">
                <source src="sleepAway.ogg" type="audio/ogg">
                    <source src="sleepAway.mp3" type="audio/mpeg">
            </audio>
            <button onclick="playMusic()" id="btnPlay">Play</button>
            <button onclick="pauseMusic()" id="btnPause">Pause</button>
            <button onclick="stopMusic()" id="btnStop">Stop</button>
            <button onclick="volUp()" id="btnVolUp">Volume Up</button>
            <button onclick="volDown()" id="btnVolDown">Volume Down</button>
            <span id="songTime"></span>

            <input id="sliderTime" type="range" min="0" value="0" />
            <div id="musicList"></div>




</body>


</html>

music.js


var xml='<?xml version="1.0"?>';
xml +='<music>';
xml +=' <composition>';
xml +=' <title>O Mio Babbino Caro</title>';
xml +=' <composer>Puccini</composer>';
xml +=' <time>2:12</time>';
xml +=' <filename>SleepAway.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>The Man I Love</title>';
xml +=' <composer>Gershwin</composer>';
xml +=' <time>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <titleAllegro</title>';
xml +=' <composer>Beethoven</composer>';
xml +=' <time>3:45</time>';
xml +=' <filename>piano.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';


Did you check the html-validator? There are some missing </div>'s and a couple of other errors.
Maybe that’s the reason?

Since I posted this I fixed alot of those errors heres an up to date version with the same problem. http://test.shibagames.com

A couple of errors you need to address. E.g.

document.getElementById('[COLOR="#FF0000"]btnPlay[/COLOR]')

The ID of the Play button is actually play, not btnPlay.

That was changed already. My updated code is here. http://test.shibagames.com

Nope, it’s still the same. Check your source code. :slight_smile:

document.getElementById('[COLOR="#FF0000"]btnPlay[/COLOR]').addEventListener('click', playMusic, false);

<button onclick="playMusic()" id="[COLOR="#FF0000"]play[/COLOR]">Play</button>

Ok I updated it again. I missed that. but when I change them from btnPlay to play, the play button turns into a pause button which great, but the Time Elapsed 2:22 is gone and I can’t use the scrubber bar anymore and the volume buttons don’t work anymore.
http://test.shibagames.com

Disregard my last message. I fixed it. But my Audio Player still doesn’t work in Google Chrome. Can you help me with that?
updated: http://test.shibagames.com

The error in chrome I get are:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=plunker&p1=Error%3A&#8230;0%20at%20e%20(http%3A%2F%2Ftest.shibagames.com%2Fangular.min.js%3A29%3A115) angular.min.js:6