Volver al Programación / Codificación foro

Necesita ayuda para construcción de caja de resonancia sin conexión

  • Zealous
  • Guru
  • Guru
  • Avatar de Usuario
  • Registrado: Abr 15, 2011
  • Mensajes: 1195
  • Loc: Sydney
  • Status: Offline

Nota Enero 13th, 2013, 11:03 am

Estoy trabajando en un proyecto para un cliente y he encontrado algún código PHP que podría ayudar pero en caso de que no tengo internet en el sitio del evento que deba examinar una versión JS para poder jugar offline. Lo que estoy buscando es una referencia que me comenzó a trabajar en el diseño que he hecho.
HTML
Código: [ 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
Código: [ 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. }


Este método es usar VLC para reproducir el audio y las costuras que utiliza un software externo para reproducir el audio. Estoy empezando a mirar en secuencias de comandos internos para reproducir el audio dentro de la fuente.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Enero 13th, 2013, 11:03 am

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Registrado: Jul 06, 2010
  • Mensajes: 266
  • Status: Offline

Nota Enero 14th, 2013, 8:31 am

¿Has mirado en una posibilidad de html5 o un híbrido de flash/JavaScript?

Encontré un tutorial de la tarjeta de sonido de html5 http://blog.mozilla.org/webdev/2009/08/ ... oundboard/ utiliza php para crear las etiquetas de audio pero los podrían ser difíciles codificada en la página. Lo principal es el JavaScript y Jquery para hacerlo funcionar.

/ Fuente del ejemplo
HTML Código: [ 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.  


En cuanto a un híbrido de flash un simple objeto sound que puede pasar en la fuente para el flash utilizando la interfaz externa.
  • Zealous
  • Guru
  • Guru
  • Avatar de Usuario
  • Registrado: Abr 15, 2011
  • Mensajes: 1195
  • Loc: Sydney
  • Status: Offline

Nota Enero 14th, 2013, 10:03 am

He visto soundboard antes en algún lugar, pero las costuras de trabajar bien. Ojalá que funciona sin conexión. Pero el único problema y realmente no uno grande es no como mp3 ogg solo tan sólo necesita hacer algunas conversiones y luego alinear en tablas como llegué como 100++ sonidos. Pero esto debería funcionar bien, gracias mucho ScottG Web Master:P

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 3 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 172 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC