ActionScript - Titulo Reproductor Player html js

Val: 1

Titulo Reproductor Player html js

Publicado por Luis (1 intervención) el 21/10/2018 18:40:17

Estimados buenos dias
Soy nuevo en esto de la programacion y aun me resulta poco complicados los llamados de los codigos de js , ya que anteirormetn he usado mas plataformas que esto, pero iendo al grano. He realizado un player con el siguiente codigo script.

$(document).ready(function(){

	$("#lista li:first-child").addClass("active");

	$("#lista li").on("click",function(){

	$("#lista li").removeClass("active");

	$("audio").attr("src", $(this).attr("audio"));

	document.getElementById("song").play();

	$("#portada").attr("src",$(this).attr('portada'));

	$(this).addClass("active");

});

});

y el html-php es el siguiente:

<!-- iniciar cancion-->

<div id="playlist">

<img id="portada" src="<?php echo $musica->radio[0]->portada?>" />

<div id="titulo"><?php echo $musica->radio[0]->titulo ?></div>

<audio controls id="song" preload="auto" autoplay="true">

<source id="source" src="<?php echo $musica->radio[0]->audio?>" type="audio/mpeg" />

</audio>

<ul id="lista">

		<?php for($x=0; $x<count($musica->radio); $x++): ?>

	<li audio="<?php echo $musica->radio[$x]->audio ?>" portada="<?php echo $musica->radio[$x]->portada ?>" titulo="<?php echo $musica->radio[$x]->titulo ?>">

		<?php echo $musica->radio[$x]->titulo ?>

	</li>

		<?php endfor?>

</ul>

</div>

Al iniciar el reporductor se abre el player con la imagen del titulo de la primera cancion del playlist, se logra cambiar y sonar ambas partes, pero el asunto es querer adicionar el titulo del playlist dentro del player. con una player audio html es normal hacerlo, pero con el js y el php esta un poco tedioso poder lograr la programacion del JS.
Habia probado con llamdo de TEXT pero solo hace el llamado lo que escrito en la linea de programacion mas no al llamdo del titulo del php

<?php echo $musica->radio[$x]->titulo ?>

Espero puedan orientarme con este tema

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Mostrar el título de la canción seleccionada en un reproductor de audio

Publicado por Alejandro (369 intervenciones) el 29/06/2023 17:05:25

Hola, Luis.

Según entiendo, deseas mostrar el título de la canción actualmente seleccionada en el reproductor de audio. Puedes lograrlo realizando algunas modificaciones en tu código JavaScript y HTML/PHP. Aquí te muestro cómo puedes hacerlo:

En tu script JavaScript, puedes agregar una línea para obtener el título de la canción actual y luego mostrarlo en el elemento correspondiente en tu HTML. Aquí está el código modificado:

$(document).ready(function() {

  $("#lista li:first-child").addClass("active");

  $("#lista li").on("click", function() {

    $("#lista li").removeClass("active");

    $("audio").attr("src", $(this).attr("audio"));

    document.getElementById("song").play();

    $("#portada").attr("src", $(this).attr("portada"));

    $(this).addClass("active");

    // Obtener el título de la canción seleccionada

    var tituloCancion = $(this).attr("titulo");

    // Mostrar el título en el elemento correspondiente

    $("#titulo").text(tituloCancion);

});

});

En tu HTML/PHP, ya tienes un elemento `<div>` con el id "titulo" donde deseas mostrar el título de la canción actualmente seleccionada. El código JavaScript modificado se encargará de actualizar el contenido de ese elemento con el título correspondiente.

Asegúrate de que los datos del título de la canción estén correctamente definidos en tu variable `$musica->radio[$x]->titulo`.

Con esta modificación, cada vez que se haga clic en una canción de la lista, el título se actualizará en el reproductor de audio.

Espero que esto te ayude a lograr lo que estás buscando.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar