-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (134 loc) · 5.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astralschatten - Nebel des Kosmos</title>
<!-- Include FontAwesome CSS via CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Include Howler.js via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #000; /* Set the background color to dark */
color: #fff; /* Set text color to white */
}
#album-container {
width: 90%;
max-width: 90vh; /* Limit to 90% of viewport height for a square container */
margin: 5%;
overflow: hidden;
position: relative;
border-radius: 10px; /* Optional: Add border-radius for rounded corners */
}
#album-cover {
width: 100%;
height: 80%; /* Adjusted height to make space for the progress bar */
object-fit: contain; /* Ensure the entire image is contained within the square */
}
#progress-bar {
width: 100%;
height: 10px;
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.2); /* Slightly translucent white background */
border-radius: 0 0 10px 10px; /* Rounded corners only at the bottom */
}
#progress {
width: 0; /* Initial width of the progress bar (0%) */
height: 100%;
background-color: #800080; /* Purple color for the progress indicator */
}
#play-pause-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#play-pause {
font-size: 36px; /* 50% bigger */
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5); /* Translucent white */
border-radius: 50%; /* Make it a circle */
width: 60px; /* Set width and height to ensure a perfect circle */
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
#play-pause:hover {
background-color: rgba(255, 255, 255, 0.7); /* Lighten the background on hover */
}
#play-pause:active {
background-color: rgba(255, 255, 255, 0.9); /* Darken the background on click */
}
</style>
</head>
<body>
<div id="album-container">
<!-- Replace 'img/cover.jpg' with the actual relative path to your album cover image -->
<img id="album-cover" src="img/cover.jpg" alt="Nebel des Kosmos Album Cover">
<div id="progress-bar">
<progress id="progress" value="0" max="100"></progress>
</div>
<div id="play-pause-container">
<!-- Provide a play button for the user to initiate playback -->
<div id="play-pause"><i class="fas fa-play"></i></div>
</div>
</div>
<!-- Use Howler.js for audio playback -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var sound = new Howl({
src: ['media/gute_musik_final.mp3'],
loop: true,
volume: 0.5, // Adjust the volume as needed
autoplay: true, // Autoplay the audio
onplay: function() {
playPauseButton.innerHTML = '<i class="fas fa-pause"></i>'; // Pause icon
},
onpause: function() {
playPauseButton.innerHTML = '<i class="fas fa-play"></i>'; // Play icon
},
onend: function() {
playPauseButton.innerHTML = '<i class="fas fa-play"></i>'; // Reset to play icon when the audio ends
}
});
var playPauseButton = document.getElementById('play-pause');
var progressBar = document.getElementById('progress');
var progressContainer = document.getElementById('progress-bar');
function updateProgressBar() {
var value = (sound.seek() / sound.duration()) * 100;
progressBar.style.width = value + '%';
}
function togglePlayPause() {
if (sound.playing()) {
sound.pause();
} else {
sound.play();
}
}
playPauseButton.addEventListener('click', togglePlayPause);
// Update the progress bar as the audio plays
sound.on('play', function() {
setInterval(updateProgressBar, 500); // Update every 500 milliseconds
});
// Update the progress bar width when the user clicks on it
progressContainer.addEventListener('click', function(e) {
var clickX = e.clientX - progressContainer.getBoundingClientRect().left;
var widthPercent = (clickX / progressContainer.offsetWidth) * 100;
progressBar.style.width = widthPercent + '%';
sound.seek((widthPercent / 100) * sound.duration());
});
});
</script>
</body>
</html>