12

Im using soundcloud dot com to upload my sounds. i want to press a button within my mobile application and have that sound play.

So basically i want my sound to be referenced from the URL that I am given when the button is pressed by the user.

I need to do it with Javascript only. No HTML 5 please. Any help is greatly appreciated cause this is Xtremely frustrating. Any ideas? Thanks in advance.

JColling
  • 149
  • 1
  • 2
  • 6

3 Answers3

36

It's pretty simple to get started really:

function playSound(url) {
    var a = new Audio(url);
    a.play();
}

Use that as whatever event handler you want for your application. Of course, I'd hope you'd want to do more than just play (for example, maybe pause would be good too?), but it's a start.

nickf
  • 537,072
  • 198
  • 649
  • 721
  • JColling askes for a solution without HTML5. This is JavaScript, but makes use of HTML5 and is only available where HTML5 is available (all modern browsers). If you need to support older browsers, there are Flash polyfills which can be used similarily to the HTML5 element, like http://mediaelementjs.com/ – Raphael Michel Apr 15 '12 at 11:01
  • @rami -- yeah, but he also said for his **mobile** site, which kinda pushes Flash off the table. I assumed there must have been a misunderstanding about what HTML5 is -- I read it more as that he didn't want any player UI on the page. – nickf Apr 15 '12 at 17:38
  • mobile app not site and your right Nickf, I do NOT want a player in my app. I want the button I created to make the sound I choose......Like I said I uploaded a sound with soundcloud. Im not sure if maybe i need a different way of doing things, but I want my button to make the sound go off...Its not that hard to understand i dont know how else to explain it....push button hear sound...simple really.....I appreciate the help guys. It means a ton to me. ;) – JColling Apr 15 '12 at 17:48
  • @JColling Then the code by nickf should work. At least in modern browsers. It is HTML5 but does not show a player at all, so everyone's happy. My further suggestion was to use some invisible(!) Flash library for the browsers not supporting this code. – Raphael Michel Apr 15 '12 at 21:09
  • @nickf Yep, seems to be a misunterstanding :) – Raphael Michel Apr 15 '12 at 21:10
  • What do you bean by URL? Can i set a youtube link? If not what sites can i use to upload my custom audios? – Loizos Vasileiou Apr 10 '19 at 12:23
  • sometime working some time error of promise in google chrome browser – Rajesh Smartwebtech Jul 20 '20 at 08:10
2
let sound = new Audio("http://sound.com/mySound.mp3");

//on play event:
sound.onplay = () => {

};

//on pause event:
sound.onpause = () => {

};

//on end event:
sound.onended = () => {

};

//play:
sound.play();

//pause:
sound.pause();

//stop:
sound.pause();
sound.currentTime = 0;
0

Use jPlayer to play sound using Javascript. This will take you a lot of time and frustration.

jplayer.org/

Here's what your code might look like with jPlayer. Note: You're not forced to use a skin with jPlayer because all it is is just an API to play audio.

Example code to play a video or audio on load.

$(function() { // executed when $(document).ready()
  $("#jpId").jPlayer( {
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4v: "http://www.myDomain.com/myVideo.m4v" // Defines the m4v url
      }).jPlayer("play"); // Attempts to Auto-Play the media
    },
    supplied: "m4v",
    swfPath: "jPlayer/js"
  });
});

http://jplayer.org/latest/developer-guide/

Larry Battle
  • 9,008
  • 4
  • 41
  • 55
  • 1
    I appreciate the attempt, but I dont want a "player".....I want to push a button in my application and have a sound play through the users speakers. I dont want a player with buttons to show on screen and I dont want a new web page to show up I just want the sound to start playing at the click of a pre made button...... Any help is greatly appreciated. Thank you in advance! ;-) – JColling Apr 15 '12 at 03:54
  • You're misunderstanding what jPlayer is. It's really just a jQuery plugin and swf file that allows you to play audio through a web browser. You don't need a skin to play audio with it. $( element ).jPlayer( 'play' ) is all you need to play audio on any element in the DOM. Also it has a TON of features that you love. Try it out. http://jplayer.org/latest/developer-guide/ – Larry Battle Apr 15 '12 at 13:18
  • your right im confused now lol.....I just want the user to push a button and a sound to play.....Is this the easiest way? The simpler, the better.... – JColling Apr 15 '12 at 17:53
  • Well. Yes. You either need HTML5, Flash, Silverlight or a plugin of some kind to play audio. Or... you could use the embed tag. Here's a tutorial http://www.oreillynet.com/pub/a/oreilly/digitalmedia/2005/02/23/mp3_embed.html – Larry Battle Apr 16 '12 at 17:25
  • Thanks Larry, but Im not looking for an option that causes a pop up window to display, i just want the sound to play when the button is clicked. No windows, no players, no popups....Just the sound to play once each time the button is clicked.... Thanks in advance to anyone that can help...... – JColling Apr 17 '12 at 14:04
  • I appreciate the attempt to help, by the way. ;-) – JColling Apr 21 '12 at 16:12