-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic.html
121 lines (106 loc) · 4.54 KB
/
music.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hossein Moosavi PhD Website</title>
<!-- Meta data, title, linked stylesheets, and scripts go here -->
<link href="https://fonts.cdnfonts.com/css/reforma-1918" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4/css/all.min.css">
<style>
/* Music player */
#player {
position: fixed;
top: 5px;
right: 0px;
z-index: 100;
display: flex;
}
#player button {
background: none;
border: none;
cursor: pointer;
color: color: rgba(242, 242, 242, 0.6);
/* Default color */
transition: color 0.5s ease-in;
/* Smooth color transition */
}
#player button:hover i {
color: blue;
/* Color when hovered */
transform: scale(1.1);
/* Add a scale transformation */
}
#player button i {
font-size: 18px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div id="player" class="media-player">
<audio id="audio-player" src="path-to-your-media/example1.mp3"></audio>
<button id="play-pause" style="color: gold; font-size: 32px;"><i class="fas fa-play"></i></button>
<button id="next" style="color: gold; font-size: 32px;"><i class="fas fa-forward"></i></button>
<button id="mute" style="color: gold; font-size: 32px;"><i class="fas fa-volume-mute"></i></button>
<button id="repeat" style="color: gold; font-size: 32px;"><i class="fas fa-redo"></i></button>
</div>
<script>
function initAudio() {
this.currentSong = 0;
this.volume = 1;
this.baseURL = "https://res.cloudinary.com/sf-cloudinary/video/upload/v1525440046/";
this.fileNames = [
"dmwaltz.mp3",
"nocturne92.mp3",
"mozart25.mp3",
"trista.mp3",
"waltzflowers.mp3"
];
this.songTitles = [
"Dmitri Shostakovich - Waltz No. 2",
"Frederic Chopin - Nocturne op. 9 no. 2",
"Mozart - Symphony no. 25",
"Heitor Villa-Lobos - Tristorosa",
"Pyotr Tchaikovsky - Waltz of the Flowers"
];
this.audio = document.getElementById("audio-player");
this.audio.src = this.baseURL + this.fileNames[this.currentSong];
this.audio.loop = true; // Now the audio will loop by default
this.audio.autoplay = true;
this.audio.addEventListener("ended", () => {
this.currentSong = (this.currentSong + 1) % this.fileNames.length;
this.audio.src = this.baseURL + this.fileNames[this.currentSong];
this.audio.play();
});
let playPauseButton = document.getElementById('play-pause');
playPauseButton.addEventListener('click', () => {
if (this.audio.paused) {
this.audio.play();
playPauseButton.innerHTML = '<i class="fas fa-pause"></i>';
} else {
this.audio.pause();
playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
}
});
let nextButton = document.getElementById('next');
nextButton.addEventListener('click', () => {
this.currentSong = (this.currentSong + 1) % this.fileNames.length;
this.audio.src = this.baseURL + this.fileNames[this.currentSong];
this.audio.play();
});
let muteButton = document.getElementById('mute');
muteButton.addEventListener('click', () => {
this.audio.muted = !this.audio.muted;
});
// Toggle the 'loop' property when the 'repeat' button is clicked
let repeatButton = document.getElementById('repeat');
repeatButton.addEventListener('click', () => {
this.audio.loop = !this.audio.loop;
});
}
initAudio();
</script>
</body>
</html>