call audio on event without plugin or player

Question

13 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>

audio javascript

5 Contributors
11 Replies
355 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by StephenopolousINC

Dani AI

Generated 9 Months Ago

A concise, modern approach: stop injecting embed/ActiveX markup and use the HTML5 audio APIs to pick a playable file at runtime and fall back to a visible control when autoplay is blocked. Test available encodings with canPlayType() and create an HTMLAudioElement via new Audio() (or <audio> in markup). Autoplay started on load will often be blocked by browsers now, so plan for a user-start fallback (small play button or controls) rather than relying on onload to always succeed. (developer.mozilla.org)

A compact JavaScript pattern that picks the best format and handles autoplay rejection:

function pickAndPlay(sources){
  const a = new Audio();
  for(let s of sources){
    if(a.canPlayType(s.type)) {
      a.src = s.src;
      a.play().catch(()=> {
        const btn = document.createElement('button');
        btn.textContent = 'Play greeting';
        btn.onclick = () => a.play().then(()=>btn.remove());
        document.body.appendChild(btn);
      });
      return;
    }
  }
  const fall = document.createElement('audio');
  fall.controls = true;
  sources.forEach(s => { let src = document.createElement('source'); src.src=s.src; src.type=s.type; fall.appendChild(src); });
  document.body.appendChild(fall);
}

(The snippet uses canPlayType() and the Audio() constructor so playback only tries formats the browser claims to support.) (developer.mozilla.org)

Format and conversion notes: provide at least an MP3 and one open format (Opus/Ogg or WAV/AAC) — MP3 is widely supported while Ogg/Opus coverage varies between engines (Safari historically had gaps). Use a reliable converter like FFmpeg or Audacity to make small, well-encoded files; avoid Flash fallbacks today (Flash reached end-of-life and is unsafe/unsupported). (caniuse.com)

Troubleshooting tip tied to the thread: if duration or other properties show NaN, that usually means metadata hasn’t loaded yet — wait for loadedmetadata / canplay / canplaythrough events before reading duration or relying on timing info. This also explains the NaN behavior seen in Firefox/Chrome earlier in the thread. (developer.mozilla.org)

Notes on earlier replies: ’s <audio> example is the right direction for static markup; ’s suggestion to include multiple encodings is exactly the compatibility strategy; ’s legacy dynsrc/embed approaches work only in some environments and are best replaced with the HTML5 API above.

All 11 Replies

adam.adamski.96155 43 Junior Poster

13 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

13 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

13 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=
        controls
  >
  <br>
  <div id=inf>
     <img src=><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.

call audio on event without plugin or player

Dani AI

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers