Problema al reproducir mp3 con un un atributo personalizado

jflabur · 6 Oct 2017

Buenas noches betas!

El tema es que no consigo reproducir el sonido con esta función al hacer click con el ratón.

filename es el atributo personalizado que necesito ya que los archivos mp3 tienen el mismo nombre que el atributo filename="001"
es decir, 001.mp3

PHP:

$(document).ready(function() {
    var sound = document.createElement("audio");
    if (!("src" in sound)) {
        sound = document.createElement("bgsound");
    }
    document.body.appendChild(sound);

    $(".player").click(function(event) {
        sound.src = this.filename;
        sound.play && sound.play();
    }, function() {
        sound.src = "../sounds/";
    });
});

PHP:

<span class="player" filename="001" + ".mp3">Click/span>

Saludos

locoporti · 6 Oct 2017

para qué es ese 001" + ".mp3

" + "

??

jflabur · 6 Oct 2017

porque ya están creados así los <span filename="001"><span filename="002"> y hay muchísimos y los archivos de sonido tienen el mismo nombre pero con la extensión .mp3 . Así con la función ya reproduzco los sonidos sin tener que modificar miles de <span> pero no se si se hace asi +".mp3" o así +=".mp3".

de hecho me he vuelto loco con muchas combinaciones de código y debo de estar oxidado ya que no he logrado reproducir el sonido

saludos

YeltsinReyes · 7 Oct 2017

[MENTION=54040]jflabur[/MENTION] y asi te funciona ??

PHP:

<span class="player" filename="001">Click/span>

PHP:

$(document).ready(function(){
	
    var sound = document.createElement("audio");
    if (!("src" in sound)) {
        sound = document.createElement("bgsound");
    }
    document.body.appendChild(sound);

    $(".player").click(function(){
	var filename = $(this).attr("filename");
        sound.src = "../sounds/"+filename+".mp3";
	sound.play();
    });
	
});

jflabur · 7 Oct 2017

YeltsinGraphs No me funciona así tampoco. gracias por responder

dannegm · 8 Oct 2017

Yo probé la opción de [MENTION=1597]YeltsinGraphs[/MENTION] y sí que funciona. Podrías actualizar el código que estás usando ahora?. Creo que hay muchos problemas, entre ellos al querer concatenar directo de HTML:

HTML:

filename="001" + ".mp3"

El que probablemente es mejor usar los atributos data

HTML:

data-filename="001.mp3"

El que las etiquetas audio ya cumplen esa misma función (es un poco redundante crear una etiqueta para ello, es decir, da lo mismo escribir

PHP:

<span filename="001.mp3></span>

Que

PHP:

<audio src="001.mp3" />

Y finalmente que, cuando haces la llamada a this en tu script, el scope es jQuery y no el DOMElement al que deseas acceder. Para acceder directo al scope de ese DOMElement por medio de jQuery y a su ves obtener un data o un atributo, deberías hacer:

Insertar CODE, HTML o PHP:

// <span data-filename>
$(this).data('filename');

// <span filename>
$(this).prop('filename');

// <span filename="value">
$(this).attr('filename');

Espero esto te ayude, saludos!

Problema al reproducir mp3 con un un atributo personalizado

jflabur Seguir

locoporti

jflabur

YeltsinReyes

jflabur

dannegm