www.webdeveloper.com
Results 1 to 4 of 4

Thread: Html5 Audio Player works everywhere, but Google Chrome

  1. #1
    Join Date
    Jun 2011
    Posts
    13

    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
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,511
    Audio for HTML5 works fine in my Chrome Browser.

    Why are you using XML when a plain old array[object] set up would suffice?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Jun 2011
    Posts
    13
    Because I was reading a book and following it. And it went an xml route. So my audio player works in your chrome browser?

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,511
    No HTML5 <audio and <video player works in my chrome browser.

    I am using HTML5 <video in my browser as a project for my sons scout group. So I know it works and it is set up in pretty much the same way as your script except no XML element is used.

    I would say that the error you are experiencing is to do with another part of your script causing a page error and preventing the play from working.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles