Audioplayer hinter Bild
Hallo Leute, Mein Name ist Daniel und stehe mit html relativ am Anfang.
Hoffe es kann mir jemand bei meinem Problem helfen.
Ich möchte auf meiner Seite lediglich ein Lautsprecher Icon haben wo wenn ich daraufklicke sich ein neuer Tab mit dem Player öffnet.
Könnte mir jemand hierbei kurz einen Anstoß geben :-)
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
body{
overflow:hidden;
}
#player{
display:none;
}
#box{
border:1px solid black;
width:calc(60vw - 4px);
min-width:100px;
min-height:100px;
height:60vw;
overflow:hidden;
border-radius:30px;
text-align:center;
margin:calc(50vh - 30vw) calc(50vw - 30vw);
}
img{
width:100%;
height:calc(100% - 60px);
}
#anaus{
position:absolute;
left:-9999px;
}
#anaus:checked ~ div{
display:block;
position:absolute;
margin:0 auito;
z-index:9999;
}
audio{
width:60vw;
border:2px solid grey;
border-radius:30px;
}
</style>
<div id="box">
<input type="checkbox" id="anaus">
<label for="anaus">
<img src="/image/lautsprecher.jpg"></label>
<div id="player">
<audio controls src='/media/wellen.wav'>
</div>
</div>