SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Code:
    <!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
    Code:
    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>';

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Did you check the html-validator? There are some missing </div>'s and a couple of other errors.
    Maybe that's the reason?

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since I posted this I fixed alot of those errors heres an up to date version with the same problem. http://test.shibagames.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    A couple of errors you need to address. E.g.

    Code:
    document.getElementById('btnPlay')
    The ID of the Play button is actually play, not btnPlay.

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was changed already. My updated code is here. http://test.shibagames.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by anonymous9 View Post
    That was changed already.
    Nope, it's still the same. Check your source code.

    Code:
    document.getElementById('btnPlay').addEventListener('click', playMusic, false);
    Code:
    <button onclick="playMusic()" id="play">Play</button>

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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…0%20at%20e%20(http%3A%2F%2Ftest.shibagames.com%2Fangular.min.js%3A29%3A115) angular.min.js:6


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •