call audio on event without plugin or player

Question

12 Years Ago

Hello, I am trying to call an audio file using the onload event. I am able to do it using the media player plugin but I need to be able to call it without the use of a plugin and have play directly in the browser. I think the <audio> tag and html 5 have something to do with it but I am unfamiliar with it. Here is what I got:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<head>
<!-- Note: you must schedule a task in windows task scheduler to launch html doc -->

<script type="text/javascript"><!--
    var callAudio = function(soundfile) {
 document.getElementById("sound").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    }

    //-->

    </script> 
<script type="text/javascript">
<!--

    var d=new Date();
    var hours=d.getHours(); 
    var minutes=d.getMinutes();
    var seconds=d.getSeconds();

        document.write("<br />"+hours + ":" + minutes +":"+ seconds+"<br />");

    var greeting = function()
        {

    if (hours >=4 && hours <12)  {
        greeting =(callAudio('sounds/goodMorning.wma'));
                                    }

    if (hours >=12 && hours <17) {
        greeting = (callAudio('sounds/goodAfternoon.wma'));
                                    }

    if (hours >=17 && hours <23) {
        greeting = (callAudio('sounds/goodEvening.wma'));
                                    }

    if (hours >=23 && hours !==3)   {
        greeting = (callAudio('sounds/goToSleep.wma'));
                                    }

    if (hours <=3 && hours !==4)     {
        gretting = (callAudio('sounds/goToSleep.wma'));
                                    }

        }

    var theDay=d.getDay();
switch (theDay)
        {
        case 5:
            document.write("<b>Finally Friday</b>");
            break;
        case 6:
            document.write("<b>Super Saturday</b>");
            break;
        case 0:
            document.write("<b>Sleepy Sunday</b>");
            break;
        case 1:
            document.write("<b>Back to the grind Monday</b>");
            break;
        case 2:
            document.write("<b>Another day in paradise Tuesday</b>");
            break;
        case 3:
            document.write("<b>Over the hump Wednesday</b>");
            break;

        default:
            document.write("<b>I'm really looking forward to this weekend!</b>");
        }   
//-->
</script>

</head>
<body onload="greeting();">
<span id="sound"></span>
</body>
</html>

javascript

5 Contributors
11 Replies
330 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by StephenopolousINC

adam.adamski.96155 43 Junior Poster

12 Years Ago

Hey there, you want to use the audio tag? I had a play with the w3schools page try-it: http://www.w3schools.com/tags/tag_audio.asp
Using the editor I used this code -

<!DOCTYPE html>
<html>
<body>

<audio autoplay="true">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

</body>
</html>

and found that
Firefox 15.01 will play the ogg, but not the mp3.
IE8 won't play anything.
Chrome (Version 22.0.1229.92 m) will play both.

Sogo7 0 Newbie Poster

12 Years Ago

http://www.online-convert.com/ is a useful bookmark or you can download the VLC media player http://www.videolan.org/vlc/index.html it's free and has a built in file format conversion function [versions available for PC,Linux and MAC] Been tinkering with something similiar at lovelogic.net/a_/trans.php and as long as you include both MP3 & WAV versions of the audio the browser should do the rest.

zeroliken 79 Nearly a Posting Virtuoso

12 Years Ago

but this does not address that issue of browser compatibility.

check the cross browser solution here http://html5doctor.com/native-audio-in-the-browser/

and a flash fallback for old browsers here http://www.html5tutorial.info/html5-audio.php at the end of the article

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

StephenopolousINC 0 Light Poster · Answer 1 · 2012-10-10T19:43:33+00:00

Hey thanks that helps but how can I call the audio file with JavaScript. I am using JavaScript to decide which audio file to play.

StephenopolousINC 0 Light Poster · Answer 2 · 2012-10-11T00:27:54+00:00

Turns out all I had to do was convert the audio files but this does not address that issue of browser compatibility. The code will have to get more complex to check browser type first and then run the appropriate code. Does anyone know of a good sound file converter that is free?

Troy III 272 Posting Pro · Answer 3 · 2012-10-11T05:02:06+00:00

and found that
Firefox 15.01 will play the ogg, but not the mp3.
IE8 won't play anything.
Chrome (Version 22.0.1229.92 m) will play both.

That's ironic because the following will play in any Internet Explorer, say version 0 through IE10 if you like.

Without even having to make use the <bgsound> element, I will demonstrate here the posibility of playing audio files without plug-ins using plain <img> tag; to (among other multimedia files) also play a separate audio file (mp3 in this demo). The supported formats are limited only by the number/variety of formats your current OS can play independently.

<!DOCTYPE html>
<html>
  <head>
   <basefont face="geneva, arial, helvetica" size=2 color=#555555>
  </head>
<body>

<div align=center>
   <h1>   The Policy Of Truth  </h1>

   <img id=audio title="right-click for [ Play : Pause / Stop ] commands"
        src=http://t0.gstatic.com/images?q=tbn:ANd9GcR8cqxyVAIUQwMiijsXV3Z6fru33gnRIJYONVzJmBaV7z1LPIc0
        border=0 height=180 width=244 
    dynsrc=http://www.soundcat.ch/download.php?id=13477
        controls
  >
  <br>
  <div id=inf>
     <img src=http://www.nantucketsound.com/images/loading.gif><br>
    wait for file download 
  </div>
</div>

<script>

    document.
    onreadystatechange = 

    function(){
        if(audio.complete)
            inf.innerHTML  = audio.mimeType + "<br>",
            inf.innerHTML += ( audio.fileSize / 1024  / 1024 ).toPrecision(4) + " MB";
        }

</script>
</body>
</html>

p.s.: The file linked is not a stream, -meaning: will not play before it is fully loaded!

StephenopolousINC 0 Light Poster · Answer 4 · 2012-10-11T14:12:00+00:00

you can download the VLC media player

you can download the VLC media player

Wow I had VLC and never knew it converted. That is insane. Thanks for the info.

StephenopolousINC 0 Light Poster · Answer 5 · 2012-10-11T17:09:18+00:00

as long as you include both MP3 & WAV versions of the audio the browser should do the rest

How can I do that is this situation. I get how that would work with embeding but I am calling the audio file with script depending on what time of day it is.

StephenopolousINC 0 Light Poster · Answer 6 · 2012-10-11T17:13:50+00:00

The supported formats are limited only by the number/variety of formats your current OS can play independent

Cool song. I can only get this code to work in IE. I just get NaN in Firefox and Chrome. I still have a lot to learn.

Troy III 272 Posting Pro · Answer 7 · 2012-10-12T21:01:56+00:00

Cool song. I can only get this code to work in IE. I just get NaN in Firefox and Chrome.

But, you don't need to. I gather that this app is for local use on top of it for personal use.

Here is a Demo that will play on Chrome and all IE versions.

<!DOCTYPE html>
<html>
<meta charset=UTF-8>
<head>
<style>
* {padding:0; margin: 0; border-radius: 8px }
#time { font:600  12pt Arial;
    position: relative;
    top:-23pt;
    color:rgba(0,180,255,.6)
}
#msg {  font: bold 16pt Georgia;
    color: rgba(0,180,255,1);
    padding:0 0 5px 0;
}

body div { color: rgb(0,170,225); }
</style>

<script>
    var d = new Date();
    var hours = d.getHours(); 

    var callAudio = 
        function( soundfile ) {
            sound.src = soundfile;
            audio.dynsrc = soundfile;
    }

    var greeting = function()
        {
    time.innerHTML = d.toLocaleTimeString();
    showTime : setInterval(
    "time.innerHTML = new Date().toLocaleTimeString()", 1000);

    if (hours >=4 && hours <12)  {
        greeting = callAudio('sounds/goodMorning.mp3');
    }

    if (hours >=12 && hours <17) {
        greeting = callAudio('sounds/goodAfternoon.mp3');
    }

    if (hours >=17 && hours <23) {
        greeting = callAudio('sounds/goodEvening.mp3');
    }

    if (hours >=23 && hours !==3)   {
        greeting = callAudio('sounds/goToSleep.mp3');
    }

    if (hours <=3 && hours !==4)     {
        gretting = callAudio('sounds/goToSleep.mp3');
    }

    var theDay=d.getDay();
    switch (theDay)
        {
        case 5:
            msg.innerHTML="Finally Friday";
            break;
        case 6:
            msg.innerHTML="Super Saturday";
            break;
        case 0:
            msg.innerHTML="Sleepy Sunday";
            break;
        case 1:
            msg.innerHTML="Back to the grind Monday";
            break;
        case 2:
            msg.innerHTML="Another day in paradise Tuesday";
            break;
        case 3:
            msg.innerHTML="Over the hump Wednesday";
            break;

        default:
            msg.innerHTML="I'm really looking forward to this weekend!";
        } 
 } 

</script>
</head>

<body scroll=auto>

<div align=center>
  <br>
  <div id = msg> msg </div>
  <video id="sound" autoplay height=150 width=200
    poster=http://us.123rf.com/400wm/400/400/altomedia/altomedia1105/altomedia110500004/9641805-music-sound-abstract-concept-showing-audio-waves-propagation-and-play-button-icon.jpg
    >
   <source src="" type="audio/mpeg">

   <img id=audio 
    border=0 height=150 width=200
        src=http://us.123rf.com/400wm/400/400/altomedia/altomedia1105/altomedia110500004/9641805-music-sound-abstract-concept-showing-audio-waves-propagation-and-play-button-icon.jpg
    dynsrc=""
        controls autostart
    >
  </video>
  <div id=time> time </div>
</div>
<script> show : greeting() </script>
</body>
</html>

but in this case you will need (audio filess) to be in mp3

StephenopolousINC 0 Light Poster · Answer 8 · 2012-10-13T06:38:59+00:00

I gather that this app is for local use on top of it for personal use

Yes this is for my personal use I have already passed the JavaScript class. I am trying to learn more than what it took to pass the class and get the cert. I am really having second thoughts about the certification proccess of WGU. They really only get your feet wet then move on to the next assignment and never really do much except validate forms or simple user interactions. This code you have here accomplishes pretty much the same thing but in a different more eloquent way. I never learned anything about playing video or audio in the <img> tag. Awesome! Thanks I will study this code it definitely gives me some things to think about.