Quiero hacer algo similar a lo que hace la página de lacuerda.net, en dónde tienes una música y le puedes subir o bajar tonalidad.
Tengo mi página de prueba en donde quiero cambiar la tonalidad de las musicas.
Eh estado probando con la función replace
, pero solo me permite cambiar una letra. Eh intentado poner la función en un mismo jquery pero el problema es que hay letras que me las cambia varias veces
Hay alguna manera de comprobar o evitar que una letra se cambie 2 veces en un solo evento?
$(document).ready(function() {
$("#mas").click(function() {
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ C /g," D ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ D /g," E ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ E /g," F ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ F /g," G ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ G /g," A ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ A /g," B ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ B /g," C# ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ C# /g," D# ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ D# /g," F ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ F# /g," G# ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ G# /g," A# ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ A# /g," C ");
});
});
$("#menos").click(function() {
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ Bb /g," Ab ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ C /g," Bb ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ D /g," C ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ E /g," D ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ F /g," Eb ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ G /g," F ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ A /g," G ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ B /g," A ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ Db /g," B ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ Eb /g," Db ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ Gb /g," E ");
});
$("body *").html(function(buscayreemplaza, reemplaza) {
return reemplaza.replace(/ Ab /g," Gb ");
});
});
$("#original").click(function() {
location.reload(true)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Al presionar el boton "+1"
Acorde Cambio
C -> D
D -> E
E -> F
F -> G
G -> A
A -> B
B -> C#
C# -> D#
D# -> F
F# -> G#
G# -> A#
A# -> C
Al presionar el boton "-1"
Acorde Cambio
C -> Bb
D -> C
E -> D
F -> Eb
G -> F
A -> G
B -> A
Db -> B
Eb -> Db
Gb -> E
Ab -> Gb
Bb -> Ab
-->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=0">
<script src="jquery-3.2.0.min.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
</head>
<!-- Los estilos se proyectarán a nuestra aplicacion -->
<body>
<input type="button" value="-1" id = "menos" >
<input type="button" value="+1" id = "mas" >
<input type="button" value="Original" id = "original" >
<pre>
<b>1 - TE LOAMOS, OH DIOS </b>
<b> G </b>
1Te loamos, oh Dios, con unánime voz
<b> D </b>
Porque en Cristo, tu Hijo, nos diste perdón.
<b> CORO </b>
<b> G D </b>
Aleluya Te alabamos, cuán grande es tu amor
<b>G C G </b>
Aleluya Te adoramos, bendito Señor.
</pre>
</body>
</html>
<!-- Saúl Hernández -->
<!-- YouTube: saul hernandez piano -->
Esto es lo que tengo, al dar en menos funciona perfectamente, pero luego se pierde todo.