/
index.js
92 lines (77 loc) · 2.64 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
(
function() {
const AudioContext = window.AudioContext || window.webkitAudioContext
const audioContext = new AudioContext()
const audioElement = new Audio()
const track = audioContext.createMediaElementSource(audioElement)//carga elemento html
const gainNode = audioContext.createGain();
//
const playButton = document.querySelector('.toggle-play');
const volumeControl = document.querySelector('#volumen');
let progressBar = document.querySelector("progress");
let url = "./josecaos-j71g1gj7-soundcloud.edit.mp3"
// audioElement.crossOrigin = "anonymous";
audioElement.src = url
audioElement.controls = false
audioElement.autoplay = false
audioElement.loop = false
//
// console.log(audioElement);
//
play(playButton,track,audioContext,audioElement,url,gainNode,progressBar)
// progress bar
progressBar.addEventListener("click", clickSeek);
function clickSeek(e) {
var percent = e.offsetX / this.offsetWidth
audioElement.currentTime = percent * audioElement.duration//aplica tiempo seleccionado
progressBar.value = percent * 100
}
// control volumen
volumeControl.addEventListener('input', function() {
gainNode.gain.value = this.value;
}, false);
// termina play callback
audioElement.addEventListener('ended', (e) => {
playButton.dataset.playing = 'false'
console.log("Fin play: " + e);
}, false)
}()
)
//
function play(elemento,conexion,contexto,audioelement,fileURL,gain,progressbar) {
let prog
// clearInterval(prog)
conexion.connect(gain).connect(contexto.destination)
elemento.addEventListener('click', () => {
if (contexto.state === 'suspended') {
contexto.resume();
}
if (elemento.dataset.playing === 'false') {
// nombre del archivo
document.querySelector('.nombre h2').innerHTML = fileURL
// agrega el archivo de audioContext
elemento.setAttribute('src',fileURL)
audioelement.play();
elemento.dataset.playing = 'true';
prog = (//sequencia la barra de progreso
setInterval(()=>{
console.log('setInterval ON');
progress(progressbar,audioelement)
},250)
)
// progreso del track
} else if (elemento.dataset.playing === 'true') {
audioelement.pause();
document.querySelector('.nombre h2').innerHTML = "... "
elemento.dataset.playing = 'false';
clearInterval(prog)
}
}, false)
}
function progress(progressbar,audioelement) {
let long = progressbar.clientWidth
let point = audioelement.currentTime / long
let res = point*100
console.log(res);
progressbar.value = res
}