4

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.

9
  • y que sale por pantalla??
    – user46896
    el 27 jun. 2017 a las 16:15
  • Mi idea es tener un 2 botones con el cambie los acordes un boton + y un boton -, el boton + me cambiaria las letras originales G>A, C>D, D>E y el boton - me cambiaria las letras originales G>F, C>Bb,D>C, igual como lo hace la pagina de la cuerda.net al cambiar de tonalidad con cualquier cancion el 27 jun. 2017 a las 16:30
  • y esos botones donde estan programados??
    – user46896
    el 27 jun. 2017 a las 16:49
  • Aun no los tengo programados, es una aplicación que tengo en la tienda de android que se llama "Himnario con acordes", pero creo que quizá deba programarlos para que me puedan entender, mi idea de publicar esta pregunta era solo que me ayudaran con la plantilla o algo así para poder utilizarla, o alguna idea ya que lo mas cerca que he encontrado es esa funcion el 27 jun. 2017 a las 16:52
  • ok, mira no te puedo dar el código arreglado por que no tengo idea de lo que estés pensando te puedo dar los pasos para que programes y tengas ese alcance.
    – user46896
    el 27 jun. 2017 a las 16:55

2 respuestas 2

0

Lo que hice fue encerrar cada acorde en una etiqueta <b> por separado con un data-original="" indicando cual es el acorde original. El script busca en que posición del array se encuentra el acorde y lo reemplaza por el acorde que se encuentra en la misma posición pero dentro del array Cambio.

El script hace exactamente lo que pedís, pero no se si musicalmente es correcto porque de música no entiendo nada.
Ahora, me da la sensación de que algo está mal, porque al subir un acorde existe la posibilidad de que después no lo pueda bajar porque las letras son distintas.

Si me mostrás una tabla que explique como se sube o baja de acorde puedo corregir el script.

Te dejo un link de SO que aparentemente hace lo que necesitás, pero la secuencia de acordes es distinta: https://stackoverflow.com/questions/7589362/transposing-music-using-javascript-or-jquery

var acordesUp = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F#', 'G#', 'A#'];
var acordesUpCambio = ['D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F', 'G#', 'A#', 'C'];
var acordesDown = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'Db', 'Eb', 'Gb', 'Ab', 'Bb'];
var acordesDownCambio = ['Bb', 'C', 'D', 'Eb', 'F', 'G', 'A', 'B', 'Db', 'E', 'Gb', 'Ab'];

$('#menos').click(function () {
  $('[data-original]').each(function () {
    var acordeActual = $(this).text();
    var acordeIdx = acordesDown.indexOf(acordeActual);
    $(this).text(acordesDownCambio[acordeIdx]);
  });
});

$('#mas').click(function () {
  $('[data-original]').each(function () {
    var acordeActual = $(this).text();
    var acordeIdx = acordesUp.indexOf(acordeActual);
    $(this).text(acordesUpCambio[acordeIdx]);
  });
});

$('#original').click(function () {
  $('[data-original]').each(function () {
    $(this).text($(this).data('original'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 data-original="G">G</b>
1Te loamos, oh Dios, con unánime voz 
                                       <b data-original="D">D</b>
Porque en Cristo, tu Hijo, nos diste perdón. 

<b>  CORO </b>

 <b data-original="G">G</b>                                    <b data-original="D">D</b>
Aleluya Te alabamos, cuán grande es tu amor 
<b data-original="G">G</b>                     <b data-original="C">C</b>       <b data-original="G">G</b>
Aleluya  Te adoramos, bendito Señor. 
</pre>

0

Hay alguna manera de comprobar o evitar que una letra se cambie 2 veces en un solo evento?

replace es una función de JavaScript que puede usarse con o sin jQuery. Lo estás usando con el flag g el cual hace el "emparajamiento global" es decir te cambia todas las coincidencias. Si sólo quieres cambiar la primera, quita ese flag.

A continuación un ejemplo.

Se incluye dos veces la secuencia A,B,C usando como separador saltos de línea en una etiqueta pre. Al hacer clic en el botón Cambiar se reemplaza la primera A por D mediante el uso de replace. Si se vuelve a hacer clic, la primera A será ahora la de la segunda secuencia y esta será reemplazada por D.

No se hace uso de jQuery pues no hace falta. Véase ¿Se debería usar jQuery en "toda" aplicación HTML/CSS/JavaScript?

function cambiar(){
  var pre = document.querySelector('pre');
  pre.innerHTML = pre.innerHTML.replace(/A/,'D');
}
<input type="button" value="Cambiar" onclick="cambiar();"/>
<pre>
A
B
C
A
B
C
</pre>

1
  • Creo que la pregunta es otra (eso interpreté). Me parece que quiere reemplazar todas las x->y + y->z, sin que las x se conviertan en z por el doble reemplazo.
    – Mariano
    el 5 nov. 2017 a las 3:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.