Wie mache ich ein einfaches <audio> Element beim Scrollen am unteren Rand des Browser-Fensters?

Ich benutze Github, um HTML-Code für eine Website zu hosten, die ich am Aufbau arbeite, und ich würde gerne einen Audio-Player an den unteren Rand des Fensters mit Scrolling hinzufügen. Ich habe es an einem Punkt gemacht, aber das USB-Flash-Laufwerk, auf dem es war beschädigt, und ich habe die Datei für immer verloren. Wer weiß einen einfachen Weg, dies zu tun? Ich habe es gemacht, ohne ein div zu verwenden und ich möchte es so behalten.Wie mache ich ein einfaches <audio> Element beim Scrollen am unteren Rand des Browser-Fensters?

Quelle

2016-07-02 The Unnamed Engineer

position: fixed; unten: 0 –

Können Sie Ihren Code teilen, was Sie erstellt haben? –

Der aktuellste Code ist derzeit im Github Repo gespeichert. Die Datei es Test.html bei https://github.com/The-Unnamed-Engineer/Website-coding/tree/gh-pages –

Was ist ein wenig css zwicken auf der Audio-style-Attribut

 

bottom: 0; 
position: fixed; 
right: 0;

Quelle

2016-07-02 06:03:09

Ich bin mir ziemlich sicher, dass es schon so eingestellt ist ... Wie auch immer Sie sich frei fühlen können Nehmen Sie Änderungen an der Git-Kopie vor. Ich habe es für die richtige Einstellung auf auto eingestellt, damit es versuchen kann, es zu zentrieren. –

Ich habe es überprüft. Sie haben Musikklasse verwendet, um die CSS zu definieren, aber auf dem Audio-Tag, anstatt Audio-Tag-Klasse zu Musik geben, haben Sie es Stil Musik gegeben. Überprüfen Sie bitte das. Verwenden Sie auch rechts: 0 in der CSS anstelle von Auto, wenn Sie es unten rechts auf Ihrer Seite wollen –

Ich möchte es in der unteren Mitte der Seite. Klasse scheint ein bisschen besser. –

Verwenden CSS Styling

HTML und CSS

<html> 
<style> 
    #fixed{ 
     position:fixed; 
     bottom:0px; 
     right:0px; 
    } 
</style> 
<body> 
<audio id = "fixed" controls> 
<source src = "audio.mp3" type = "audio/mpeg"> 
</audio> 
</body> 
</html>

Überprüfen Sie die Schnipsel aus ... Diese Hoffnung ist, was Sie wollen!

#fixed{ 
 
    position:fixed; 
 
    bottom:0px; 
 
    right:0px; 
 
}

<html> 
 
<body> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>End of Page 
 
<audio id = "fixed" controls> 
 
<source src = "audio.mp3" type = "audio/mpeg"> 
 
</audio> 
 
</body> 
 
</html>

Vielen Dank im Voraus

Quelle

2016-07-02 06:26:03

Ich würde es gerne alle in der einen .html-Datei wenn möglich zu halten. –

Ich habe die Antwort aktualisiert, aber ich werde nicht wie repariert aussehen, bis einige Daten auf der Seite sind. Wie im Snippet gab es Leerzeichen von
Tags. Kommentar wenn noch irgendwelche Probleme –

Eigentlich funktioniert es jetzt. Ich hatte Stil = Musik, wenn es Klasse = Musik hätte sein sollen. –

Wie mache ich ein einfaches <audio> Element beim Scrollen am unteren Rand des Browser-Fensters?

Antwort

Verwandte Themen