2023-09-30 15:34:06 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="normalize.css">
|
|
|
|
<meta property="og:title" content="This is an example of speex," />
|
|
|
|
<meta property="og:description"
|
|
|
|
content="an audio compression codec specifically tuned for the reproduction of human speech." />
|
|
|
|
<meta property="og:audio" content="https://thisisanexampleofspeex.uk/audio.mp3" />
|
|
|
|
<title>This is an example of speex,</title>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
height: 100vh;
|
|
|
|
margin: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-shrink: 1;
|
2023-10-01 20:37:13 +01:00
|
|
|
max-width: 100%;
|
2023-09-30 15:34:06 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.content-inner {
|
|
|
|
flex-grow: 1;
|
|
|
|
flex-shrink: 1;
|
|
|
|
flex-basis: 0;
|
|
|
|
padding: 2ex;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<div class="content">
|
|
|
|
<div class="content-inner">
|
|
|
|
<h1>This is an example of speex,</h1>
|
|
|
|
<p>an audio compression codec specifically tuned for the reproduction of human speech.</p>
|
|
|
|
<audio id="player" autoplay controls loop>
|
|
|
|
<source src="audio.mp3" type="audio/mp3">
|
|
|
|
</audio>
|
|
|
|
</div>
|
|
|
|
<footer>
|
|
|
|
<p>Site by chaos</p>
|
|
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!--You Lost The Game-->
|
|
|
|
<script>
|
|
|
|
var audio = document.getElementById('player');
|
|
|
|
document.querySelector("body").addEventListener('mousemove', e => {
|
|
|
|
audio.play();
|
|
|
|
});
|
|
|
|
audio.play();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|