Back To Programming / Scripting / Coding Forum

Need help building offline soundboard

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post January 13th, 2013, 11:03 am

I am working on a project for a client and i have found some PHP code that could help but just in case i have no internet at the event site i need to look into a JS version to be able to play offline. What i am looking for is a reference to get me started to work it into the design i have made.
HTML
Code: [ Select ]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="play.js"></script>
</head>

<body>
<span id=soundspan>
<form>
<input type="button" value="Play" onClick="PlaySound('soundboard\Grenades\FragGrenade.mp3')">
</form>
</span>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="play.js"></script>
  7. </head>
  9. <body>
  10. <span id=soundspan>
  11. <form>
  12. <input type="button" value="Play" onClick="PlaySound('soundboard\Grenades\FragGrenade.mp3')">
  13. </form>
  14. </span>
  15. </body>
  16. </html>

JS
Code: [ Select ]
// JavaScript Document
function PlaySound(surl) {

document.getElementById("soundspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>";

}
  1. // JavaScript Document
  2. function PlaySound(surl) {
  4. document.getElementById("soundspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>";
  6. }


this method is using VLC to play the audio and it seams that it is using a external software to play the audio. I am starting to look into internal scripts to play the audio within the source.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 13th, 2013, 11:03 am

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 266
  • Status: Online

Post January 14th, 2013, 8:31 am

Have you looked into a html5 possibility or a flash/JavaScript hybrid?

I found a html5 sound board tutorial http://blog.mozilla.org/webdev/2009/08/ ... oundboard/ he uses php to build out the audio tags but those could be hard coded into the page. The main thing is the JavaScript and Jquery to make it work.

// Source of the example
HTML Code: [ Select ]
<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>ClouserW Soundboard</title>
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css">
   <style type="text/css" media="screen">
      button {
          -moz-border-radius: 5px;
          background: red;
          border: 3px solid black;
          display: inline-block;
          cursor: pointer;
          padding: 3px 5px;
          margin: 5px;
      }
 
      html {
          background: url(http://farm4.static.flickr.com/3112/2721341322_e73bca6a9e_b.jpg);
      }
 
      h1 {
          color: white;
      }
   </style>
 
 
</head>
<body>
    <div id="doc">
        <h1>ClouserW Soundboard</h1>
        <!-- JS here to prevent 'flash' of all the default audio players -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
           $(function() {
                $("audio").removeAttr("controls").each(function(i, audioElement) {
                    var audio = $(this);
                    var that = this; //closure to keep reference to current audio tag
                    $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                        that.play();
                    }));
                });
            });
        </script>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/Get off my lawn.ogg" controls autobuffer="true" title="Get off my lawn"></audio>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/Go ahead and take that one I think it's fligtars.ogg" controls autobuffer="true" title="Go ahead and take that one I think it's fligtars"></audio>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/I like that.ogg" controls autobuffer="true" title="I like that"></audio>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/I'm waiting on SVN.ogg" controls autobuffer="true" title="I'm waiting on SVN"></audio>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/It seemed like a good idea at the time.ogg" controls autobuffer="true" title="It seemed like a good idea at the time"></audio>
                                <audio src="http://ryandoherty.net/clouserwsoundboard/clips/SVN is so slow.ogg" controls autobuffer="true" title="SVN is so slow"></audio>
                               
            </div>
 
</body>
</html>
 
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.    <title>ClouserW Soundboard</title>
  6.    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
  7.    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css">
  8.    <style type="text/css" media="screen">
  9.       button {
  10.           -moz-border-radius: 5px;
  11.           background: red;
  12.           border: 3px solid black;
  13.           display: inline-block;
  14.           cursor: pointer;
  15.           padding: 3px 5px;
  16.           margin: 5px;
  17.       }
  18.  
  19.       html {
  20.           background: url(http://farm4.static.flickr.com/3112/2721341322_e73bca6a9e_b.jpg);
  21.       }
  22.  
  23.       h1 {
  24.           color: white;
  25.       }
  26.    </style>
  27.  
  28.  
  29. </head>
  30. <body>
  31.     <div id="doc">
  32.         <h1>ClouserW Soundboard</h1>
  33.         <!-- JS here to prevent 'flash' of all the default audio players -->
  34.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  35.         <script type="text/javascript" charset="utf-8">
  36.            $(function() {
  37.                 $("audio").removeAttr("controls").each(function(i, audioElement) {
  38.                     var audio = $(this);
  39.                     var that = this; //closure to keep reference to current audio tag
  40.                     $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
  41.                         that.play();
  42.                     }));
  43.                 });
  44.             });
  45.         </script>
  46.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/Get off my lawn.ogg" controls autobuffer="true" title="Get off my lawn"></audio>
  47.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/Go ahead and take that one I think it's fligtars.ogg" controls autobuffer="true" title="Go ahead and take that one I think it's fligtars"></audio>
  48.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/I like that.ogg" controls autobuffer="true" title="I like that"></audio>
  49.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/I'm waiting on SVN.ogg" controls autobuffer="true" title="I'm waiting on SVN"></audio>
  50.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/It seemed like a good idea at the time.ogg" controls autobuffer="true" title="It seemed like a good idea at the time"></audio>
  51.                                 <audio src="http://ryandoherty.net/clouserwsoundboard/clips/SVN is so slow.ogg" controls autobuffer="true" title="SVN is so slow"></audio>
  52.                                
  53.             </div>
  54.  
  55. </body>
  56. </html>
  57.  


As far as a flash hybrid a simple sound object that you can pass in the source to the flash using the external interface.
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post January 14th, 2013, 10:03 am

I have seen that soundboard before somewhere, but seams to be working fine. hopefully it will work offline. But only problem and really not a big one is does not like mp3 just ogg so just need to do some conversion and then align it into tables as i got like 100+ sounds. But this should work well, thank you very much ScottG Web Master :P

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 128 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.