disappearing text and play music

[sinus]

Hello
I know I could write to other forums for this question here, but honestly, this is where I have the most confidence and in the end my "project" is based on IMatch.
And all my html, css and JS - knowledge (what is small yet) I lern with help of IMatch. 

I have a problem with one aspect.
I want to include music in a script. This works very well, and I have it so far (thanks to code snippets from other friendly users) as follows:

1) I have two pictures, somewhere on the screen.
2) As soon as a user clicks on a picture, music is played
3) a player appears (with volume etc)
4) if one clicks on the other picture, other music is played

This works great.
What I thought I was supposed to do, I can't do. I've tried and tried... without success.

What I can't do:
First there should be only two images, nothting else. No text, no player.
When you click on a picture, the player should appear, the music should play and the title and lyrics should appear so you know what kind of music it is.
If you click on the other picture, the text should disappear and the new text should appear.

That would be great.
Perfect would be (but not soooo important), if the text would disappear after some time (e.g. 5 seconds), then you would only have the two pictures, the music and the player.
And it would be even more perfect if the player would "fade out", i.e. only weakly visible. But that's not important.

Maybe one of you has an idea or can just give me a "hint".
As an attachement some pictures, that's surely better understandable and the whole code.
Here is the most important code.

Thanks a lot in advance.

PS: the style and images will of course be changed, if I get this problem solved
PS1: when I have finished the project, I will of course upload it ... but that will still take some time ... 

Code Select Expand

<style>
    .song {
  clear:left;
  margin:1 0;
}

.song:after {
content : ".";
display : block;
height : 0;
clear : left;
visibility : hidden;
}

/*  Audio-Controller */
audio {
  display: none;       
  position: absolute;
  margin-left: 200px;
  margin-top: 10px;
  min-width:0
}

/* image player 1 */
.play1 {
  position: fixed;
  display: block;
  margin-top: 8%;
  margin-left: 11%;
}

.play1-schrift-titel {
  position: fixed;
  display: block;
  margin-top: 14%;
  margin-left: 11%;
  font-size: 22px;
  color: rgb(111, 219, 252);
}

.play1-schrift {
  position: fixed;
  display: block;
  margin-top: 17%;
  margin-left: 11%;
  font-size: 18px;
  color: rgb(111, 219, 252);
}

/* das bild player 2 */
.play2 {
  position: fixed;
  display: block;
  margin-top: 23%;
  margin-left: 22%;
}

.play2-schrift-titel {
  position: fixed;
  display: block;
  margin-top: 29%;
  margin-left: 22%;
  font-size: 22px;
  color: rgb(243, 243, 86);
}

.play2-schrift {
  position: fixed;
  margin-top: 32%;
  margin-left: 22%;
  font-size: 18px;
  color: rgb(243, 243, 86);
}

</style>

    <script>
        jQuery(document).ready(function($){
          $("audio").on("play",
        function(me){$("audio").each(function(i,e){
         
        if(e!==me.currentTarget) {
          this.pause();               
       
        if(document.getElementById('1')){
          this.style.display="none";
          }
          }});
          });
          })
       
       function play(e) {
           var de = document.getElementById(e);
           var div = document.getElementsByClassName('playlist_container')[0];
               
           // delete all buttons
           var number = div.getElementsByTagName('input').length;
           for (var i = 0, n = number; i < n; i++){
               div.getElementsByTagName('input')[i].style.background="none";
           }
       
           if (de.paused) {
               // Avoid caching from a stream
               url = de.src.split("?")[0];
               var de1 = url  + "?" + new Date().getTime();
               document.getElementById(e).src = de1;
           
               div.getElementsByTagName('input')[e-1].style.background="url('/images/play_button.png') no-repeat 2px 2px / 16px";
             
               de.play();
               de.style.display="block";   
       
               de.onended = function (){
                   if (document.getElementById(e+1)) {
                       play(e+1);
       
                   } else {
                       play(1);
                   }
               }
           } else {
               de.pause();
           }
       }
       
       function cont(e) {
           if (document.getElementById(e+1)) {
               play(e+1);
           } else {
               play(1);
           }
       } 
         </script>
   
    <head>

    </head>

    <body>
        <div class="playlist_container">
            <div class = "song">
   
              <input onclick="play(1)" type="image" class= "play1" src="image1.png"  width="50" height="80" alt="Beethoven">
              <audio onended="cont(1)" id ="1" src="music1.mp3" controls preload="none">
                </audio>
   
              <h3 onclick="play(1)" class="play1-schrift-titel">e.g. Beethoven</h3>
              <p onclick="play(1)" class="play1-schrift"> e.g. the title of the music</p>
            </div>
           
            <div class = "song">
              <input onclick="play(2)" type="image" class= "play2" src="image2.png" width="50" height="80" alt="Titel 2">
              <audio onended="cont(2)" id ="2" src="music2.mp3" controls preload="none" >
                </audio>
   
              <h3 onclick="play(2)" class="play2-schrift-titel">e.g. Pink Floyd</h3>
              <p onclick="play(2)" class="play2-schrift"> ... here also the the title</p>
            </div>
          </div>
   
    </body>

[Mario]

To hide DOM elements, you set the display:none style. If you add this as a style, the text is initially hidden.

<div id="text" style="display:none;">
    YOUR TEXT
</div>

If you later want to show the element, change the style in your script to display:block or whatever you need.
This is easy with jQuery:

$('#text').show();

or

$('#text').fadeIn();

See: https://www.w3schools.com/jquery/eff_fadein.asp

To show show the text 5 seconds after the user clicked on play, set a timeout and then call the fadeIn()

See: https://www.w3schools.com/jsref/met_win_settimeout.asp

$('#play-button').click(() => {
   
    // Start the music...

    // Show the text after 5 seconds.
    window.setTimeout(() => {
        $('#text').fadeIn();
    },5000);
});

[sinus]

WOW, Mario, want you break a record this week? 
You answered faster than lightning. 

Thanks a lot, I will carefully look at your answer and code!

BTW, I think really, slowly, slowly I am doing some progress with scripting.
Thanks to you and this really helpful forum.