A l'emplacement ou s'affichera le lecteur audio et ses réglages, on invite le visiteur à choisir un titre parmi ceux qui sont proposés.

Les titres proposés peuvent être présentés comme des liens : sur textes, images, boutons ou tout autres éléments cliquables. En lignes, en listes ou sous forme de tableaux.

Pour proposer ce lecteur audio
JavaScript doit être activé 

Caractéristique de cette solution audio:

C'est une image (ou un texte) qui invite à choisir un titre ; elle sera remplacée par le lecteur du navigateur.

Dans cet exemple j'ai mis une image qui ressemble aux boutons pour choisir un titre.

Le titre est sur les boutons, dans le code il est prévu pour chaque titre un texte à afficher à coté du lecteur.

Pour écouter la musique, il faut 1) choisir un titre,  et  2) cliquer  sur le ▷ du lecteur.

cliquer sur un titre pour le sélectionner, puis sur la touche "play" du lecteur qui apparaitra, pour écouter . .

. .

Ceux là

Red River Valley1 ❤

Cœur cantabile

Jeux interdit (MarieT)

Si tu ne revenais pas (Alain B.)

Le vent nous portera

PRINCIPE DU CODAGE:

1) à l'emplacement du lecteur, mettre dans le html (< >):

<p id="demo">Mettre ici une invite à cliquer sur un titre (texte ou image). </p>

2) pour chaque lien vers un titre (ici par clic sur des bouton) mettre dans le html (< >) ce type de code :

<p><button onclick="$(&quot;demo&quot;).innerHTML = &quot;&lt;audio controls &gt; &lt;source src=\&quot;http://adresse-du-fichier.mp3\&quot; type=\&quot;audio/mp3\&quot;&gt; Your browser... &lt;/audio&gt; ♬ texte1 affiché avec lecteur ♫ &quot;">Texte du bouton1</button></p> 

Pour voir le code actif sur la page actuelle:
➜ afficher le code source de cette page, et noter ce qui est entre deux lignes de ▼▲▼▲▼▼▲▼▲

 Explications pour faire :

- 1) Image du lecteur : http://ekladata.com/Eawp7_DzUNKwST6BZiOREiN1l7c/Choisir-titre.png 
( en voici une autre, pour exemple : http://ekladata.com/_ZWntxAGIiCV-MnHl4mGuka5HLo )

- 2) Style des boutons pour cet exemple  class="btn btn-primary"  (ce css est pré-défini dans nos blogs, mais on peut  faire un autre choix)

 Au cas où, il n'y a pas que primary, voici la famille >> voir illustration

En pratique, pour mettre en place chaque bouton: 

Il suffit de  reporter le code ci-dessous dans une page "brouillon" et remplacer avec précision ce qui est surligné en vert/jaune/bleu. (ce qui est en rouge correspond à l'élément ou s'affiche le lecteur)
Ensuite faire un Copié-Collé du code modifié dans le code source < > de l'article, à l'emplacement du bouton

Exception éventuelle: si le style des boutons ou l'affichage du lecteur doit être différent

<p ><button class="btn btn-primary btn-lg" onclick="$(&quot;demo&quot;).innerHTML = &quot;&lt;audio controls &gt; &lt;source src=\&quot;http://adresse-du-fichier1.mp3\&quot; type=\&quot;audio/mp3\&quot;&gt; Votre navigateur ne permet pas de jouer ce fichier.. &lt;/audio&gt;  titre  affichage à droite du du lecteur  &quot;">Texte du bouton1</button></p>

Petite info explicative sur les caractères de couleur grise:

onclick est une instruction JavaScript, et certains caractères tels que < ou > ou " ou ' sont intégrés à ce langage

Il est nécessaire de différencier ce qui est à usage HTML de ce qui est JavaScript
  &quot; remplace "       &lt; remplace <       &gt; remplace >         \"  signifie que le " ne doit pas être interprété par JavaScript