Coder Social home page Coder Social logo

notas-voz's People

Contributors

asiern avatar dependabot[bot] avatar luucas16 avatar

Watchers

avatar

notas-voz's Issues

2 Grabando Audio

  1. Descargar el código del ejemplo anterior y abrir mediante VSCode. Ahora, modifica el código
    de tal manera que en vez de ser audioplayer nos encontremos con tres botones: Record, Play
    y Upload (en este último , por el momento no se programará nada).
  2. Crea una clase de nombre App en el fichero public/js/main.js. La clase debe contener los
    siguientes métodos: constructor(), init(), initAudio(), loadBlob(),
    initRecord(), record(), stopRecording(), playAudio(), stopAudio(),
    upload(), deleteFile(). A modo de atributos tendremos, entre otros: this.audio(con
    el fin de almacenar el elemento Audio), this.blob (para almacenar el contenido del audio) y this.state (para almacenar el estado actual en un elemento JSON). De momento
    estarán vacíos, los iremos rellenando poco a poco.
  3. Los botones se deben generar de manera dinámica al cargarse la ventana (con el evento
    window.onload). Cada botón estará en un archivo JS. Por ejemplo, para usar el botón
    Record (para grabar) haremos lo siguiente:
    // public/js/main.js
    import { recordFn } from "/js/recordButton.js";
    [...]
    const liRecordButton = document.getElementById("liRecordButton");
    liRecordButton.innerHTML = recordFn();
  4. En el método init(), pedir permiso para grabar. Al aceptar esa petición, el navegador creará un stream. A continuación, llamará a los métodos initaudio() e initRecord(stream).
  5. El método initAudio() crea una elemento de tipo audio (this.audio) y gestiona los
    siguientes eventos sobre dicho elemento: onloadedmetadata, ondurationchange,
    ontimeupdate y onended. En cada uno de los gestores, por el momento tan sólo se pide
    escribir por consola (console.log). Crea el fichero Ejercicios.md en tu proyecto. Dentro,
    genera una tabla con el comentado Audio event listener. Por cada uno , comenta para qué se
    utiliza y añade un ejemplo. Por ejemplo:
    Objetivo: este evento se lanza cuando el audio finaliza su reproducción.
    Posible uso: puede ser valioso cuando deseamos realizar una tarea nada más acabar el
    audio. Así, reproducir una canción tras otra de un playlist.
  6. El método initRecord() recogerá un stream como parámetro de entrada que le pasará al
    constructor MediaRecorder para inicializar la grabación (en un objeto mediaRecorder).
    Programa los eventos ondataavailable y onstop para el objeto mediaRecorder.
    El último de dichos eventos generará un Blob (this.blob) y llamará al método loadBlob.
  7. El método loadBlob() se encargará de establecerel parámetro blob como fuente del
    elemento de audio (this.audio.src).
  8. Recuerda que usaremos el objeto JSON state para gestionar el estado de la aplicación.
    El método setState realizará una fusión entre el objeto JSON actual (this.state)
    y el nuevo estado recibido como parámetro (state). A continuación, llamará al método
    render().
    setState(state) {
    this.state = Object.assign({}, this.state, state);
    this.render();
    }
  9. El método render() actualizará la interfaz de la aplicación en función de la situación actual
    (playing, recording, uploaded, deleting, ...). Por ejemplo, en el estado playing irá actualizando el tiempo que queda para finalizar el audio (03:12, 03:11, 03:10... etc. Hasta 00:00). Este
    7
    último ejemplo lo puedes lograr de manera sencilla, llamando al método setState en el
    gestor del evento this.audio.ontimeupdate.
  10. Para poder probar tu código implementa los métodos record, stopRecording, playAudio
    y stopAudio.
  11. El código súbelo al proyecto grupal de tu GitHub y asígnale la etiqueta milestone1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.