Cómo crear un botón de sonido

Escrito por cristina puno | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un botón de sonido
Añadir botones de sonido enriquece el contenido de tu sitio. (play icon. (with clipping path) image by Andrey Zyk from Fotolia.com)

Cuando creas un sitio multimedia, una de las formas más populares para añadir música o sonido a tu página web es la colocación de un botón de sonido en la página. Un botón de sonido permite a los visitantes del sitio escuchar música o un poco de sonido relacionados con el contenido. Esto es especialmente útil cuando la entrega de la información se explica mejor con el sonido, como un sitio de ciencia que explica las llamadas de las aves o un sitio de música con una introducción a los diferentes instrumentos musicales. Hay varias formas de agregar un botón de sonido en tu sitio web. Las más utilizadas incluyen tecnologías tales como Flash y Javascript.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

    DHTML y Javascript

  1. 1

    Carga un archivo de sonido en un directorio de tu sitio web. Los archivos de sonido incluyen los siguientes formatos: .wav, .mp3 y .mid.

  2. 2

    Escribe el código Javascript y DHTML para reproducir el audio una vez se haga clic en el botón "Reproducir" en el Bloc de notas:

    <script type="text/javascript"> function PlaySound(surl) { document.getElementById("soundspan").innerHTML= "<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script>

    <span id=soundspan></span> <form> <input type="button" value="Play" onClick="PlaySound('strawberry_fields.wav')"> </form>

    Cambia 'strawberry_fields.wav' por el nombre de tu archivo de sonido.

  3. 3

    Guarda el archivo como HTML y súbelo al mismo directorio que el archivo de sonido.

    Yahoo! Media Player

  1. 1

    Sube un archivo MP3 a un directorio de tu sitio web.

  2. 2

    Abre la página Web en la que deseas insertar el botón de audio en el Bloc de notas o en un editor HTML como CoffeeCup o Dreamweaver.

  3. 3

    Ve al sitio de Yahoo!'s Media Player y copia el código JavaScript de su reproductor de medios. Pega esto en la página en la que deseas insertar el botón de audio.

  4. 4

    Escribe el enlace de tu archivo MP3 en el código HTML en tu página como: <a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a> Reemplaza "http://mediaplayer.yahoo.com/example1.mp3" por el enlace a tu archivo de audio y "First link" por el nombre de tu enlace.

  5. 5

    Guarda y prueba la página. Una vez que la página se cargue en el navegador, un botón de audio se generará automáticamente mediante el script de Yahoo!'s para los visitantes del sitio para su uso.

    Flash Player Audio

  1. 1

    Sube un archivo MP3 en un directorio de tu sitio web.

  2. 2

    Descarga los archivos necesarios para el reproductor de Flash en la página web de Audio Player.

  3. 3

    Extrae y sube los archivos a tu sitio web.

  4. 4

    Edita la página en la que deseas agregar el botón del reproductor de audio. Escribe el código para incluir el archivo "audio-player.js" en la etiqueta <head> de tu página HTML y especifica el ancho de tu reproductor:

    <script type="text/javascript" src="path/to/audio-player.js"></script> <script type="text/javascript"> AudioPlayer.setup("http://yoursite.com/path/to/player.swf", { width: 150 }); </script>

    Cambia "http://yoursite.com/path" por el directorio donde cargaste los archivos en el paso anterior.

  5. 5

    Escribe el código para el botón de audio:

    <p id="audioplayer_1">Alternative content</p> <script type="text/javascript"> AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"}); </script>

    Cambia el enlace de soundFile por la URL donde está el archivo MP3.

  6. 6

    Guarda y prueba tu página.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles