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 :-)
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>