The code:
<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>
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? 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
The Sound file link: https://djlunatique.com/playstation-4-start-up-sound-effect/
The video file link: https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view
Browser version: Chrome 108.0.5359.99
I´ve tried your code and it seems to work, see here
Maybe there was a problem with the spaces on the file name, also, there´sa simple way to change the video/audio speed with the playbackRate property in JS (speed 1 is default). For example:
<div id="player">
<audio class="myAudio" autoplay hidden>
<!--Add the class "myAudio"-->
<source src="sound.mp3" type="audio/mpeg" />
#PROBLEM
</audio>
</div>
<script>
let audio = document.querySelector(".myAudio");
<!--Select the audio element-->
audio.playbackRate = 2;
<!--Set the speed to 2x-->
</script>
All this code is in the page I linked before, so you can easily change the speed and copy-paste
Edit: I forgot to mention, Google Chrome has a special error that affects the mp3 files, if the audio doesn´t work I recommend you to try it in another browsers (or maybe change your audio format type).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.