Pick and Play Random Audio File

  • (2 Pages)
  • +
  • 1
  • 2

29 Replies - 12613 Views - Last Post: 21 December 2013 - 04:57 PM

#16 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 01:04 PM

lets go an other route, as Atli mentioned in post #10, there is an API in most browsers that allow you to manipulate the media elements in HTML 5 using Javascript.

Quote

Also, if you are creating and controlling the new HTML5 media elements in Javascript, you may be better of using the actual Javascript APIs, instead of constructing HTML strings.


Check out this link and see the properties that can be changed.

A hint is to check out the src properties description. Once you have the url all you need to do is pass it to the existing tag that has no source and play it. Now all you need to do is get a valid url returned from your function and use that for your random source.

This post has been edited by laytonsdad: 15 December 2013 - 01:06 PM

Was This Post Helpful? 0
  • +
  • -

#17 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 01:50 PM

ok now that I understand better I will do more research ...

1). you may be better of using the actual Javascript APIs
2). there is an API in most browsers that allow you to manipulate the media elements in HTML 5 using Javascript.
3). see the properties that can be changed.
4). check out the src properties description
5). Once you have the url all you need to do is pass it to the existing tag that has no source and play it.
6). Now all you need to do is get a valid url returned from your function and use that for your random source.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#18 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 02:00 PM

Here is a hint on how the api works

/* HTML audio tag with no controls */
<audio id='sound'></audio>

// Get the audio element from the page
var player = doument.getElementById('sound');

// get an attribute
var src = player.src;

// set an attribute
player.src = "url/to/sound.mp3"

// use a method
player.pause(); // This one will pause the media.



Was This Post Helpful? 1
  • +
  • -

#19 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 04:10 PM

So earlier I made the div for sound in the html like you said, and now changed to this

old = <div id="sound"></div>            new = <audio id='sound'></audio>


I added what was missing to the code ...

function mp3(){
var mp3Array = ["race3rondey.mp3", "race4jockey.mp3", "race5bunny4.mp3", "race6gettenthere.mp3"];
var choice = Math.floor(Math.random() * mp3Array.length);
mp3Array.src = mp3Array[choice];
var player = document.getElementById('sound');
var src = player.src;
player.src = mp3Array.src;
player.autoplay;
}



We are at least getting the src correct now. Console shows ...
[17:54:29.169] file:///C:/Users/Dads/Desktop/game/race6gettenthere.mp3

doesn't play, :(/>

This post has been edited by EdNolan: 15 December 2013 - 04:11 PM

Was This Post Helpful? 0
  • +
  • -

#20 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 04:32 PM

This is the autoplay setting
player.autoplay;



it will return just that, the autoplay setting.

You want a method to play the audio.
Was This Post Helpful? 0
  • +
  • -

#21 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 09:02 PM

OMG - YOU'VE GOT TO BE KIDDING ME ... RESOLVED

Seems like a lot of hoops, especially the function just to get it to play.
function mp3(){
var mp3Array = ["race3rondey.mp3", "race4jockey.mp3", "race5bunny4.mp3", "race6gettenthere.mp3"];
var choice = Math.floor(Math.random() * mp3Array.length);
mp3Array.src = mp3Array[choice];
var player = document.getElementById('sound');
var src = player.src;
player.src = mp3Array.src;
function play() {
            player.play();
}
play()
}


This post has been edited by EdNolan: 15 December 2013 - 09:03 PM

Was This Post Helpful? 0
  • +
  • -

#22 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 09:14 PM

Maybe more simple and cleaner
function mp3(){
   var mp3Array = ["race3rondey.mp3", "race4jockey.mp3", "race5bunny4.mp3", "race6gettenthere.mp3"]; // create mp3Array

   var choice = Math.floor(Math.random() * mp3Array.length); // make choice

   var player = document.getElementById('sound');// get player and save it

   player.src = mp3Array[choice]; // Change the source of the file

   player.play(); // Play the audio
}


You may want to see the browser support for mp3 and other file types here
Was This Post Helpful? 1
  • +
  • -

#23 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 09:32 PM

Problem. I uploaded the updated files to the server, double checked everything but the mp3 won't play when I load the game from the website. I am using the same browser, any ideas?
Was This Post Helpful? 0
  • +
  • -

#24 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 15 December 2013 - 09:51 PM

Did you make sure the file path is correct.

Put your sounds in a separate folder called audio and use that as your base path and add that to the url.

   var base_url = "./audio/";  //just remember you have a slash already in your path
   ...
   player.src = base_url + mp3Array[choice];


This post has been edited by laytonsdad: 16 December 2013 - 03:01 PM

Was This Post Helpful? 0
  • +
  • -

#25 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 16 December 2013 - 02:56 PM

Everything's working. Now I am thinking that when the first audio stops, another should start to play. I am thinking of just looping back to mp3 at the end of the current audio duration and randomly picking again even if it picks the same audio. What do you think of this idea?
Was This Post Helpful? 0
  • +
  • -

#26 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 16 December 2013 - 03:00 PM

use the api method ended()

Added:

This should have read " use the api property ended, it returns a boolean true if the media has ended;

This post has been edited by laytonsdad: 16 December 2013 - 10:04 PM
Reason for edit:: I was wrong

Was This Post Helpful? 0
  • +
  • -

#27 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 16 December 2013 - 09:50 PM

I'm trying to find more online info on media events, ended(); triggers my console 'ended is not defined'.
If I write it like this next line ...
player.ended() triggers my console 'player.ended(); is not a function'.

Do I need to add an event listener like this one I attempted, or should ended() work as simple as the player.play();?

player.addEventListener('ended', mp3()
{
  player.ended();
}, true);




Do you have a really good link that might show examples of ended() in great detail. I've searched all day, read a lot and want more, lol! Thanks.
Was This Post Helpful? 0
  • +
  • -

#28 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Pick and Play Random Audio File

Posted 16 December 2013 - 09:59 PM

No, I am sorry Ed.

Quote

player.ended() triggers my console 'player.ended(); is not a function'

That is correct, there is no method ended() that was a blunder of my own.

What I should have said was to use the ended property like this:

  if (player.ended){
     // video has ended
     // call mp3() to get a new src and play it.
  }



API refrence said:

ended - Returns Boolean | Indicates whether the media element has ended playback.

This post has been edited by laytonsdad: 16 December 2013 - 10:01 PM

Was This Post Helpful? 1
  • +
  • -

#29 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Pick and Play Random Audio File

Posted 16 December 2013 - 10:01 PM

ended is actually not a function, but rather a boolean property and an event. - So the event listener you try to make there would work in theory, except for that the ended() call inside it would fail, and the event callback function is defined incorrectly.

The MDN docs we already linked to contains all the info you could ever need about this.
Was This Post Helpful? 2
  • +
  • -

#30 EdNolan   User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 423
  • Joined: 22-September 13

Re: Pick and Play Random Audio File

Posted 21 December 2013 - 04:57 PM

Resolved - Thank you everyone for the support!
function mp3(){
   var mp3Array = ["race2arr.mp3", "race3rondey.mp3", "race4jockey.mp3", "race5bunny.mp3", "race6gettenthere.mp3", "wife.mp3"]; // create mp3Array
   var choice = Math.floor(Math.random() * mp3Array.length); // make choice
   var player = document.getElementById('sound');// get player and save it
   player.src = mp3Array[choice]; // Change the source of the file
   player.play(); // Play the audio
   player.addEventListener('ended', function (){
          if (player.ended){
          mp3();
          }
          }, true);
}


Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2