Cambiar letras de un html con funcion replace()

publicado por: Anonymous

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?

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
     $("#mas").click(function() {_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ C /g," D ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ D /g," E ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ E /g," F ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ F /g," G ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ G /g," A ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ A /g," B ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ B /g," C# ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ C# /g," D# ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ D# /g," F ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ F# /g," G# ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ G# /g," A# ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ A# /g," C ");_x000D_
        });_x000D_
_x000D_
    });_x000D_
_x000D_
_x000D_
     $("#menos").click(function() {_x000D_
            $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ Bb /g," Ab ");_x000D_
        });_x000D_
_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ C /g," Bb ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ D /g," C ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ E /g," D ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ F /g," Eb ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ G /g," F ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ A /g," G ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ B /g," A ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ Db /g," B ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ Eb /g," Db ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ Gb /g," E ");_x000D_
        });_x000D_
        $("body *").html(function(buscayreemplaza, reemplaza) {_x000D_
            return reemplaza.replace(/ Ab /g," Gb ");_x000D_
        });_x000D_
_x000D_
    });_x000D_
_x000D_
    $("#original").click(function() {_x000D_
        location.reload(true)_x000D_
    });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<!--_x000D_
Al presionar el boton "+1"_x000D_
Acorde  Cambio_x000D_
C   ->  D_x000D_
D   ->  E_x000D_
E   ->  F_x000D_
F   ->  G_x000D_
G   ->  A_x000D_
A   ->  B_x000D_
B   ->  C#_x000D_
_x000D_
C#  ->  D#_x000D_
D#  ->  F_x000D_
F#  ->  G#_x000D_
G#  ->  A#_x000D_
A#  ->  C_x000D_
_x000D_
_x000D_
Al presionar el boton "-1"_x000D_
Acorde  Cambio_x000D_
C   ->  Bb_x000D_
D   ->  C_x000D_
E   ->  D_x000D_
F   ->  Eb_x000D_
G   ->  F_x000D_
A   ->  G_x000D_
B   ->  A_x000D_
Db  ->  B_x000D_
Eb  ->  Db_x000D_
Gb  ->  E _x000D_
Ab  ->  Gb_x000D_
Bb  ->  Ab_x000D_
-->_x000D_
_x000D_
<html>_x000D_
_x000D_
        <head>_x000D_
        <meta charset="utf-8">_x000D_
            <link rel="stylesheet" type="text/css" href="style.css" />_x000D_
            <meta name="viewport" content="width=device-width, initial-scale=0">_x000D_
            <script src="jquery-3.2.0.min.js" type="text/javascript"></script>  _x000D_
            <script src="jquery.js" type="text/javascript"></script>  _x000D_
_x000D_
        </head>_x000D_
  <!-- Los estilos se proyectarán a nuestra aplicacion -->_x000D_
_x000D_
  <body>_x000D_
  <input type="button" value="-1" id = "menos" >_x000D_
<input type="button" value="+1" id = "mas" >_x000D_
<input type="button" value="Original" id = "original" >_x000D_
_x000D_
_x000D_
  <pre>_x000D_
<b>1 - TE LOAMOS, OH DIOS </b>_x000D_
_x000D_
<b>    G    </b>_x000D_
1Te loamos, oh Dios, con unánime voz _x000D_
<b>                                      D </b>_x000D_
Porque en Cristo, tu Hijo, nos diste perdón. _x000D_
_x000D_
<b>  CORO </b>_x000D_
_x000D_
<b> G                                    D </b>_x000D_
Aleluya Te alabamos, cuán grande es tu amor _x000D_
<b>G                     C       G      </b>_x000D_
Aleluya  Te adoramos, bendito Señor. _x000D_
</pre>_x000D_
</body>_x000D_
</html>_x000D_
<!-- Saúl Hernández -->_x000D_
<!-- YouTube: saul hernandez piano -->

_x000D_

_x000D_

_x000D_

Esto es lo que tengo, al dar en menos funciona perfectamente, pero luego se pierde todo.

solución

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

_x000D_

_x000D_

var acordesUp = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F#', 'G#', 'A#'];_x000D_
var acordesUpCambio = ['D', 'E', 'F', 'G', 'A', 'B', 'C#', 'D#', 'F', 'G#', 'A#', 'C'];_x000D_
var acordesDown = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'Db', 'Eb', 'Gb', 'Ab', 'Bb'];_x000D_
var acordesDownCambio = ['Bb', 'C', 'D', 'Eb', 'F', 'G', 'A', 'B', 'Db', 'E', 'Gb', 'Ab'];_x000D_
_x000D_
$('#menos').click(function () {_x000D_
  $('[data-original]').each(function () {_x000D_
    var acordeActual = $(this).text();_x000D_
    var acordeIdx = acordesDown.indexOf(acordeActual);_x000D_
    $(this).text(acordesDownCambio[acordeIdx]);_x000D_
  });_x000D_
});_x000D_
_x000D_
$('#mas').click(function () {_x000D_
  $('[data-original]').each(function () {_x000D_
    var acordeActual = $(this).text();_x000D_
    var acordeIdx = acordesUp.indexOf(acordeActual);_x000D_
    $(this).text(acordesUpCambio[acordeIdx]);_x000D_
  });_x000D_
});_x000D_
_x000D_
$('#original').click(function () {_x000D_
  $('[data-original]').each(function () {_x000D_
    $(this).text($(this).data('original'));_x000D_
  });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="button" value="-1" id="menos">_x000D_
<input type="button" value="+1" id="mas">_x000D_
<input type="button" value="Original" id="original">_x000D_
_x000D_
<pre>_x000D_
<b>1 - TE LOAMOS, OH DIOS </b>_x000D_
_x000D_
    <b data-original="G">G</b>_x000D_
1Te loamos, oh Dios, con unánime voz _x000D_
                                       <b data-original="D">D</b>_x000D_
Porque en Cristo, tu Hijo, nos diste perdón. _x000D_
_x000D_
<b>  CORO </b>_x000D_
_x000D_
 <b data-original="G">G</b>                                    <b data-original="D">D</b>_x000D_
Aleluya Te alabamos, cuán grande es tu amor _x000D_
<b data-original="G">G</b>                     <b data-original="C">C</b>       <b data-original="G">G</b>_x000D_
Aleluya  Te adoramos, bendito Señor. _x000D_
</pre>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *