Audio con HTLM5

7 respuestas

1. Hola necesito indicarle al player el tiempo desde el inicio dentro de un archivo de audio para comenzar a reproducir en ese punto. ¿Existe la forma? Gracias

   Responder

   1. Hola Osvaldo,

      Prueba con algo así: https://stackoverflow.com/questions/12029509/html-5-audio-play-file-at-certain-time-point

      Saludos!

      Responder

2. hola buenas tardes.. como se puede cambiar el nombre de la etiqueta details en lugar de decir details que tenga otro nombre… espero su respuesta.. gracias

   Responder

3. A mi la etiqueta de audio no me funciona, uso Prestashop y el navegador Google Chrome.

   No se a que se deberá pero no me funciona. :S

   Responder

4. pues lo siento pero esto no me deja poner parte del codigo…. si alguien puede aprovecharlo me alegrare por el.

   De todos modos donde pone Play, FF y tal teneis que poner
   <button id="play" onclick='playAudio(); disabled y cerrarlo con el cierre de html, luego escribir Play o lo que sea y cerrar el buttom con </buttom y el cierre.

   En cuanto a lo del canvas falta solo hacer un div cuyo id sea canvas y el width de 100 y height de 20 (es asi como yo lo tengo)

   Suerte

   Responder

5. /////////////////////////////////REPRODUCTOR DE MUSICA//////////////////////////////////

   //Global variable to track current file name
   var currentFile = “”;

   //display and update progress bar
   function progressBar() {
   var oAudio = document.getElementById(‘myaudio’);
   //get current time in seconds
   var elapsedTime = Math.round(oAudio.currentTime);
   //update the progress bar
   if (canvas.getContext) {
   var ctx = canvas.getContext(“2d”);
   //clear canvas before painting
   ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
   ctx.fillStyle = “rgb(255,0,0)”;
   var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
   if (fWidth > 0) {
   ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
   }
   }
   }
   //Play and pause function
   function playAudio() {
   try {
   //return objects we need to work with
   var oAudio = document.getElementById(‘myaudio’);
   var btn = document.getElementById(‘play’);
   var audioURL = document.getElementById(‘audiofile’);

   //Skip loading if current file hasn’t changed.
   if (audioURL.value !== currentFile) {
   oAudio.src = audioURL.value;
   currentFile = audioURL.value;
   }

   //Tests the paused attribute and set state.
   if (oAudio.paused) {
   oAudio.play();
   btn.textContent = “Pause”;
   }
   else {
   oAudio.pause();

   btn.textContent = “Play”;
   }
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   //Rewinds the audio file by 30 seconds.
   function rewindAudio() {
   try {
   var oAudio = document.getElementById(‘myaudio’);
   oAudio.currentTime -= 30.0;
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   //Fast forwards the audio file by 30 seconds.
   function forwardAudio() {
   try {
   var oAudio = document.getElementById(‘myaudio’);
   oAudio.currentTime += 30.0;
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   //Restart the audio file to the beginning.

   function restartAudio() {
   try {
   var oAudio = document.getElementById(‘myaudio’);
   oAudio.currentTime = 0;
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   function lessVolume() {
   try {
   var oAudio = document.getElementById(‘myaudio’);
   oAudio.volume -= 0.1;
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   function moreVolume() {
   try {
   var oAudio = document.getElementById(‘myaudio’);
   oAudio.volume += 0.1;
   }
   catch (e) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + e));
   }
   }

   //added events

   function initEvents() {
   var canvas = document.getElementById(‘canvas’);
   var oAudio = document.getElementById(‘myaudio’);

   //set up event to toggle play button to pause when playing
   oAudio.addEventListener(“playing”, function() {
   document.getElementById(“play”).textContent = “Pause”;
   }, true);

   //set up event to toggle play button to play when paused
   oAudio.addEventListener(“pause”, function() {
   document.getElementById(“play”).textContent = “Play”;
   }, true);
   //set up event to update the progress bar
   oAudio.addEventListener(“timeupdate”, progressBar, true);
   //set up mouse click to control position of audio
   canvas.addEventListener(“click”, function(e) {
   //this might seem redundant, but this these are needed later – make global to remove these
   var oAudio = document.getElementById(‘myaudio’);
   var canvas = document.getElementById(‘canvas’);

   if (!e) {
   e = window.event;
   } //get the latest windows event if it isn’t set
   try {
   //calculate the current time based on position of mouse cursor in canvas box
   oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
   }
   catch (err) {
   // Fail silently but show in F12 developer tools console
   if (window.console && console.error(“Error:” + err));
   }
   }, true);
   }
   //this event gets fired when a page has loaded
   window.addEventListener(“DOMContentLoaded”, initEvents, false);

   /***********************************************************************************************************************/
   /************************************************************************************************************************/
   /*******************************************ESTO EN EL DOCUMENTO HTML**********************************/
   /************************************************************************************************************************/
   /************************************************************************************************************************/

   Play

   Rewind

   FF

   RePlay

   More Volume

   Less Volume

   canvas not supported

   //Check for support and enable buttons
   if (window.HTMLAudioElement) {
   document.getElementById(“play”).disabled = false;
   document.getElementById(“rewind”).disabled = false;
   document.getElementById(“forward”).disabled = false;
   document.getElementById(“restart”).disabled = false;
   document.getElementById(‘less’).disabled = false;
   document.getElementById(‘more’).disabled = false;
   }

   Responder

6. Felicitaciones por su información muy productiva

   Responder