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
    17

    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
    5,765
    Audio for HTML5 works fine in my Chrome Browser.

    Why are you using XML when a plain old array[object] set up would suffice?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2011
    Posts
    17
    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
    5,765
    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.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.41113 seconds
  • Memory Usage 2,890KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates