Summary
When the welcome message starts to appear on the screen, I want the player to play the audio file in the background without appearing, but what I added does not work. How can I solve this problem? (streamlit or html or streamlit+python)
Additionally, Is it possible to set the speed of the player to default? I have to speed it up so that the text and the music are in sync
Steps to reproduce
Code snippet:
<html>
<body>
<section>
<video src="smoke.mp4" autoplay muted></video>
<div id="player">
<audio autoplay hidden>
<source src="Playstation 4 StartUp Sound Effect.mp3" type="audio/mpeg"> #PROBLEM
</audio>
</div>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
<style>
body
{
margin: 0;
padding: 0;
background:black;
}
section
{
height:100vh;
background:#000;
}
video
{
object-fit:cover;
}
h1
{
margin:0;
padding:0;
position:absolute;
top:50%;
transform: translateY(-50%);
width:100%;
text-align:center;
color:#ddd;
font-size:5em;
font-family:sans-serif;
letter-spacing:0.2em;
}
h1 span
{
display:inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate
{
0%
{
opacity:0;
transform: rotateY(90deg);
filter:blur(10px);
}
100%
{
opacity:1;
transform: rotateY(0deg);
filter:blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay: 1s;
}
h1 span:nth-child(2)
{
animation-delay: 1.5s;
}
h1 span:nth-child(3)
{
animation-delay: 2s;
}
h1 span:nth-child(4)
{
animation-delay: 2.5s;
}
h1 span:nth-child(5)
{
animation-delay: 3s;
}
h1 span:nth-child(6)
{
animation-delay: 3.75s;
}
h1 span:nth-child(7)
{
animation-delay: 4s;
}
</style>
</body>
<script>
document
.querySelector('video')
.addEventListener('ended', function(e) {
e.target.style.display = 'none';
});
</script>
</html>
The Sound file link: https://djlunatique.com/playstation-4-start-up-sound-effect/
The video file link: smoke.mp4 - Google Drive
Streamlit version: v15.2.0
Python version: v3.8
OS version: Windows 10
Browser version: Chrome 108.0.5359.99