https://gera.ar/jScripts/reproductor.js?v=2.0

1// Reproductor de audio simple y accesible para lectores de pantalla
2// Autor: Gerardo Késsler (https://gera.ar)
3// This file is covered by the GNU General Public License.
4
5// variables
6var audio_id, audio_obj, toggle_btn, back_btn, time_p, advance_btn, alert_obj;
7
8//ejecutamos las instrucciones al terminar de cargarse el documento
9document.addEventListener("DOMContentLoaded", function () {
10	if (!document.querySelector('audio') || !document.querySelector('audio').id)
11		return;
12
13	// creamos un array con todos los elementos  audio
14	var elements = document.querySelectorAll("audio");
15	// recorremos el array para crear las asignaciones por elemento
16	for (element of elements) {
17		//guardamos en la variable id, el id de cada eqtiqueta audio
18		let id = element.id;
19		//añadimos al elemento audio el evento onTimeUpdate.
20		element.setAttribute("onTimeUpdate", `audioTime("${id}");`);
21		// Añadimos un escuchador de evento para error de carga
22		element.setAttribute("onError", `loadingError("${id}");`);
23		//añadimos la lista con botones de control luego del elemento audio. Primero creamos un nodo nuevo, le añadimos la lista de controles html y finalmente lo añadimos seguidamente al elemento audio con la función insertAfter.
24		let new_element = document.createElement("div");
25		new_element.innerHTML = `<ul class="buttons_list">
26			<li><button id="${id}_toggle" onClick='playPause("${id}");'>reproducir</button></li>
27			<li><button id="${id}_back" onClick='timeBack();'>Retroceder 10 segundos</button></li>
28			<li><p id="${id}_time" onClick='speak(this.textContent);'>0:00</p></li>
29			<li><button id="${id}_advance" onClick='timeAdvance();'>Adelantar 10 segundos</button></li>
30			<li><label>Velocidad de reproducción><input type="range" min="0" max="100" step="10" value="50" onChange='audioRate(this.value)' /></label></li>
31			<div id="${id}_alert" aria-live="assertive"></div>
32		</ul>`;
33	insertAfter(element, new_element);
34	}
35});
36
37function insertAfter(element, new_element) {
38	if (element.nextSibling) {
39		element.parentNode.insertBefore(new_element, element.nextSibling);
40	} else {
41		element.parentNode.appendChild(new_element);
42	}
43}
44
45// función que asigna las variables globales los elementos a través de su id
46function getElements(id) {
47	audio_id = id;
48	audio_obj = document.querySelector(`#${id}`);
49	toggle_btn = document.querySelector(`#${id}_toggle`);
50	back_btn = document.querySelector(`#${id}_back`);
51	time_p = document.querySelector(`#${id}_time`);
52	advance_btn = document.querySelector(`#${id}_advance`);
53	alert_obj = document.querySelector(`#${id}_alert`);
54	if (!audio_obj.hasAttribute("src"))
55		audio_obj.setAttribute("src", `https://gera.club/media/${id}.mp3`);
56	}
57
58// Función que eleimina el atributo accesskey de los botones, y asigna los atajos al elemento actual.
59function addHotkeys(id) {
60	let buttons = document.querySelectorAll("button");
61	let paragraphs = document.querySelectorAll("p");
62	for (button of buttons) {
63		if (button.hasAttributes("accesskey")) {
64			button.removeAttribute("accesskey");
65		}
66	}
67	for (paragraph of paragraphs) {
68		if (paragraph.hasAttributes("accesskey")) {
69			paragraph.removeAttribute("accesskey");
70		}
71	}
72	toggle_btn.setAttribute("accesskey", "k");
73	back_btn.setAttribute("accesskey", "j");
74	time_p.setAttribute("accesskey", "i");
75	advance_btn.setAttribute("accesskey", "l");
76	audio_obj.addEventListener("ended", function() {
77		toggle_btn.innerHTML = "Volver a reproducir";
78		speak("Finalizado");
79		toggle_btn.focus()}
80	);
81}
82
83function playPause(id) {
84	if (id != audio_id) {
85		getElements(id);
86		addHotkeys(id);
87	}
88	(audio_obj.paused)? play() : pause()
89}
90
91function play() {
92	audio_obj.play();
93	toggle_btn.innerHTML = "Pausar";
94}
95
96function pause() {
97	audio_obj.pause();
98	toggle_btn.innerHTML = "Reproducir";
99}
100
101function audioTime(id) {
102	let minutos = parseInt(audio_obj.duration / 60, 10);
103	var segundos = parseInt(audio_obj.duration % 60);
104	var segundos = (segundos < 10)? `0${segundos}` : segundos;
105	let ACT_minutos = parseInt(audio_obj.currentTime / 60, 10);
106	var ACT_segundos = parseInt(audio_obj.currentTime % 60);

107	var ACT_segundos = (ACT_segundos < 10)? `0${ACT_segundos}` : ACT_segundos;
108	time_p.innerHTML = `${ACT_minutos}:${ACT_segundos} de ${minutos}:${segundos}`;
109}
110
111function timeAdvance() {
112	audio_obj.currentTime += 10.0;
113	let time_capture = time_p.textContent;
114	//speak(time_capture);
115}
116
117function timeBack() {
118	audio_obj.currentTime -= 10;
119	let time_capture = time_p.textContent;
120	//speak(time_capture);
121}
122
123function speak(str) {
124	alert_obj.textContent = str;
125	setTimeout(() => alert_obj.textContent = "", 50);
126}
127
128function audioRate(value) {
129	let values = {"0":0.75, "10":0.80, "20":0.85, "30":0.90, "40":0.95, "50":1.0, "60":1.1, "70":1.2, "80":1.3, "90":1.4, "100":1.5};
130	audio_obj.playbackRate = values[value];
131}
132
133function hotkeys(id, text) {
134	if (text == "Mostrar los atajos del reproductor") {
135		document.getElementById(`${id}_hksbtn`).textContent = "Ocultar los atajos del reproductor";
136		document.getElementById(`${id}_hks`).removeAttribute("style");
137	} else {
138			document.getElementById(`${id}_hksbtn`).textContent = "Mostrar los atajos del reproductor";
139			document.getElementById(`${id}_hks`).setAttribute("style", "display:none");
140	}
141}
142
143function loadingError(id) {
144	console.log('Audio no disponible');
145	p_element= document.createElement('p');
146	p_element.textContent= 'No se pudo cargar el archivo de audio. Por favor intente más tarde';
147	document.getElementById(id).insertAdjacentElement('afterend', p_element);
148}