/////////////////////////////////REPRODUCTOR DE MUSICA//////////////////////////////////
//variable global del fichero actual
var currentFile = "";
//mostrar la barra progresiva
function progressBar() {
var oAudio = document.getElementById('myaudio');
//obtener el tiempo actual en segundos
var elapsedTime = Math.round(oAudio.currentTime);
//actualizar la barra progresiva
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
//borrar el canvas antes de pintar
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.fillStyle = "#336699";
var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
if (fWidth > 0) {
ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
}
}
}
//Funcion de play y pause
function playAudio() {
try {
//devuelve los objetos que necesitamos para trabajar
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Omitir carga si el actual fichero no ha cambiado
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
//Prueba el atributo pausado y establece el estado
if (oAudio.paused) {
oAudio.play();
btn.getElementById = "pause";
}
else {
oAudio.pause();
btn.getElementById ="play2";
}
}
catch (e) {
if (window.console && console.error("Error:" + e));
}
}
//Retrocede la cancion 30 segundos
function rewindAudio() {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
if (window.console && console.error("Error:" + e));
}
}
//Adelanta la cancion 30 segundos
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));
}
}
//Reanuda el fichero de audio
function restartAudio() {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
if (window.console && console.error("Error:" + e));
}
}
//Baja el volumen de la musica
function lessVolume() {
try {
var oAudio = document.getElementById('myaudio');
oAudio.volume -= 0.1;
}
catch (e) {
if (window.console && console.error("Error:" + e));
}
}
//Aumenta el volumen de la musica
function moreVolume() {
try {
var oAudio = document.getElementById('myaudio');
oAudio.volume += 0.1;
}
catch (e) {
if (window.console && console.error("Error:" + e));
}
}
//eventos añadidos
function initEvents() {
var canvas = document.getElementById('canvas');
var oAudio = document.getElementById('myaudio');
//configura eventos para cambiar el botón de reproducción para hacer una pausa durante la reproducción
oAudio.addEventListener("playing", function() {
document.getElementById("play").getElementById ="pause";
}, true);
//configura eventos para cambiar el botón de reproducción para reproducir durante la pausa
oAudio.addEventListener("pause", function() {
document.getElementById("play").getElementById = "play2";
}, true);
//configura evento para actualizar la barra de progreso
oAudio.addEventListener("timeupdate", progressBar, true);
//establece clic del ratón para controlar la posición de audio
canvas.addEventListener("click", function(e) {
//son necesarias más adelante
var oAudio = document.getElementById('myaudio');
var canvas = document.getElementById('canvas');
if (!e) {
e = window.event;
}
try {
//calcular el tiempo actual, basado en la posición del cursor del ratón en el cuadro del canvas
oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
}
catch (err) {
if (window.console && console.error("Error:" + err));
}
}, true);
}
//funcion para mover la nota musical
/*function moverNota(){
elem = document.getElementById('nota2');
if(elem.style.display == 'inline'){
elem.style.display = 'none'
}else{
elem.style.display = 'inline'
};
}*/
//funcion para reproducir el audio con las imagenes de pause y play
function cambiarRep(){
elem = document.getElementById('pause');
elem2 = document.getElementById('play2');
if(elem.style.display == 'inline'){
elem.style.display = 'none'
}else{
elem.style.display = 'inline'
};
if(elem2.style.display == 'none'){
elem2.style.display = 'inline'
}else{
elem2.style.display = 'none'
};
}
window.addEventListener("DOMContentLoaded", initEvents, false);