Audio con HTLM5

También te podría gustar...

Sobre este artículo

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

URL: LaWebera.es :: Diseño de paginas web

Se dedica desde hace más de 8 años al diseño web y muy especialmente al front-end. Apasionada de Internet y los proyectos online. Sigue muy de cerca todo lo que se cuece en cuanto a emprendimiento. Ha trabajado como front-end y visual designer para empresas como ELPAIS, Banco Santander y actualmente Tuenti.

5 Respuestas

  1. Lore

    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

  2. Jhonatan

    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

  3. RodrigoCeu

    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

  4. RodrigoCeu

    /////////////////////////////////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;
    }

  5. Rodolfo Güiza F.

    Felicitaciones por su información muy productiva

Deja un comentario

El email no se publica. Todos los campos obligatorios.