| Server IP : 162.0.232.25 / Your IP : 3.146.37.217 Web Server : LiteSpeed System : Linux premium276.web-hosting.com 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : kwacuqig ( 988) PHP Version : 8.2.26 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/kwacuqig/malawisounds.com/ |
Upload File : |
<?php
include 'connect.php';
if (isset($_GET['id'])) {
$id = $_GET['id'];
$sqli = "SELECT `listened` FROM `ulbum_music` WHERE `id`='$id'";
if ($sql_run = mysqli_query($conn, $sqli)) {
if (list($listened) = mysqli_fetch_array($sql_run)) {
$increment = ++$listened;
$Sqli2 = "UPDATE `ulbum_music` SET `listened`='$increment' WHERE `id`='$id'";
$sql2_run = mysqli_query($conn, $Sqli2);
$sql = "SELECT `music`,`artist`,`title`,`music_title` FROM `ulbum_music` WHERE `id`='" . mysqli_real_escape_string($conn, $id) . "'";
if ($query_run = mysqli_query($conn, $sql)) {
list($music, $artist, $title, $music_title) = mysqli_fetch_array($query_run);
$sql2 = "SELECT `image`,`title` FROM `ulbum` WHERE `artist`='$artist' AND `title`='$title'";
if ($query_run2 = mysqli_query($conn, $sql2)) {
list($image, $album_title) = mysqli_fetch_array($query_run2);
} else {
die(mysqli_error($conn));
}
} else {
die(mysqli_error($conn));
}
}
}
}
function getAllSongs($artist, $title)
{
global $conn;
$run = mysqli_query($conn, "SELECT * FROM `ulbum_music` WHERE `artist`='$artist' AND `title`='$title' ORDER BY `id` ASC") or die(mysqli_error($conn));
$songs = '';
$count = mysqli_num_rows($run);
$initial = 1;
while ($row = mysqli_fetch_array($run)) {
$music = $row['music'];
if ($initial == $count) {
$songs .= '"' . $music . '"';
break;
}
$songs .= '"' . $music . '"' . ',';
++$initial;
}
return $songs;
}
function getAllTitles($artist, $title)
{
global $conn;
$run = mysqli_query($conn, "SELECT * FROM `ulbum_music` WHERE `artist`='$artist' AND `title`='$title' ORDER BY `id` ASC") or die(mysqli_error($conn));
$titles = '';
$count = mysqli_num_rows($run);
$initial = 1;
while ($row = mysqli_fetch_array($run)) {
$song_title = $row['music_title'];
if ($initial == $count) {
$titles .= '"' . $song_title . '"';
break;
}
$titles .= '"' . $song_title . '"' . ',';
++$initial;
}
return $titles;
}
function getCurrentIndex($artist, $title, $file)
{
global $conn;
$run = mysqli_query($conn, "SELECT * FROM `ulbum_music` WHERE `artist`='$artist' AND `title`='$title' ORDER BY `id` ASC") or die(mysqli_error($conn));
$initial = 0;
while ($row = mysqli_fetch_array($run)) {
$music = $row['music'];
if ($music == $file) {
return $initial;
break;
}
++$initial;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="x-icon" href="Icons/malawisounds.ico">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="impact/stylesheet.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/audio.css">
<script src="./js/codespace_api.js"></script>
<title><?php echo 'Streaming-' . $music_title . ' by ' . $artist; ?></title>
<style type="text/css">
body,
html {
background-image: none;
text-align: center;
height: 100%;
margin: 0;
}
.bg_img {
background-image: url("album_images/<?php echo $image; ?>");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
-webkit-filter: blur(6px);
filter: blur(6px);
}
.symbol1 {
position: relative;
top: -1px;
left: 1.3px;
}
.symbol2 {
position: relative;
top: 0px;
left: -1px;
}
button {
border-radius: 15px;
background-color: #2891a6;
background-image: linear-gradient(40deg, #84d2e1, #2891a6);
padding: 8px;
display: inline-block;
overflow: hidden;
border: none;
width: 110px;
}
</style>
</head>
<body>
<!-- background image -->
<div class="bg_img"></div>
<!-- background content -->
<div class="bg_content">
<div class="canvas-cover">
<img src="./album_images/<?php echo $image; ?>">
<!-- Canvas area -->
<canvas id="aCanvas" class="visualiser" width="500" height="500"></canvas>
</div>
<!-- title -->
<div class="title"><?php echo "$music_title"; ?></div>
<!-- artist -->
<div class="artist"><?php echo "$artist"; ?></div>
<!--Custom Html Audio Player-->
<div id="player">
<!-- Fill Bar -->
<div id="seek-bar">
<!-- <input id="fill" type="range" value="0" min="0" max="100" step="0.1"> -->
<div id="fill"></div>
</div>
<div>
<div id="cTime">0:00</div>
<div id="tTime"></div>
<div class="clear"></div>
</div>
<div>
<!-- Play / Pause -->
<div id="buttons">
<button class="previous" onclick="previousSong()">
<div class="symbol2 glyphicon glyphicon-step-backward"></div>
</button>
<button class="play" id="audio" onclick="playOrPauseSong()">
<div class="symbol1 glyphicon glyphicon-play"></div>
</button>
<button class="next" onclick="nextSong()">
<div class="symbol2 glyphicon glyphicon-step-forward"></div>
</button>
</div>
<!-- Volume -->
<div class="vol-album">
<div class="glyphicon glyphicon-volume-up" id="volume-icon"></div>
<div id="volume">
<div id="volume-line"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function $(selector) {
return document.querySelector(selector);
}
function count() {
++value;
}
var fillBar = $("#fill");
var songs = [
<?php echo getAllSongs("$artist", "$title"); ?>
];
var titles = [
<?php echo getAllTitles("$artist", "$title"); ?>
]
var currentSongIndex = <?php echo getCurrentIndex("$artist", "$title", "$music"); ?>;
var song = new Audio("album_songs/" + songs[currentSongIndex]);
var value = 0; //counter value
//GLOBALS
var ctx;
var width, height;
var dataArray;
var analyser;
var run = true;
var hue = 0;
var hueAdd = 1;
$("#audio").addEventListener("click", count) //calling count function after a click
function playOrPauseSong() {
if (song.paused) {
let theCanvas = document.getElementById("aCanvas");
resizeCanvas(theCanvas, false);
width = theCanvas.width;
height = theCanvas.height;
ctx = theCanvas.getContext("2d");
song.play();
updateMediaSession();
startVis();
$("#audio .glyphicon").classList.remove("glyphicon-play");
$("#audio .glyphicon").classList.add("glyphicon-pause");
} else {
song.pause();
$("#audio .glyphicon").classList.remove("glyphicon-pause");
$("#audio .glyphicon").classList.add("glyphicon-play");
}
}
function nextSong() {
currentSongIndex = (currentSongIndex + 1) % songs.length;
playSong();
}
function previousSong() {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
playSong();
}
function playSong() {
song.src = "album_songs/" + songs[currentSongIndex];
song.play();
$(".title").innerHTML = titles[currentSongIndex];
$("#audio .glyphicon").classList.remove("glyphicon-play");
$("#audio .glyphicon").classList.add("glyphicon-pause");
updateMediaSession();
}
function startVis() {
// shape style
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.clearRect(0, 0, width, height)
ctx.lineWidth = 2;
ctx.strokeStyle = "royalblue";
// make sure AudioContext will work fine in different browsers
let audioCtx = new AudioContext();
// copy audio source data to manipulate later
let source = audioCtx.createMediaElementSource(song);
// create audio analyser
analyser = audioCtx.createAnalyser();
// set audio analyser
analyser.fftSize = 512;
let bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
// Bind our analyser to the media element source.
source.connect(analyser);
source.connect(audioCtx.destination);
// document.getElementById("start").disabled = true;
audioVisualize();
}
function audioVisualize() {
analyser.getByteTimeDomainData(dataArray);
// clear the previous shape
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.beginPath();
ctx.clearRect(0, 0, width, height)
ctx.fill();
let radius = 127;
let cX = width / 2;
let cY = height / 2;
let radian = 0;
let radianAdd = Constants.TWO_PI / dataArray.length;
ctx.fillStyle = "hsl(" + hue + ", 100%, 75%)";
for (let i = 0; i < dataArray.length; i++) {
let x = radius * Math.cos(radian) + cX;
let y = radius * Math.sin(radian) + cY;
ctx.moveTo(x, y);
v = dataArray[i];
if (v < radius) {
v = radius;
}
x = v * Math.cos(radian) + cX;
y = v * Math.sin(radian) + cY;
ctx.lineTo(x, y);
// ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, 3, 0, Constants.TWO_PI, false);
ctx.fill();
radian += radianAdd;
}
hue += hueAdd;
if (hue > 360) {
hue = 0;
}
requestAnimationFrame(audioVisualize);
}
function updateMediaSession() {
const cover = 'album_images/<?php echo $image; ?>';
const title = titles[currentSongIndex]; // Update this to get the title from your songs array
const artist = '<?php echo $artist; ?>'; // Update this to get the artist from your songs array
const album_title = '<?php echo $album_title; ?>'; // Update this to get the artist from your songs array
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: title,
artist: artist,
album: album_title,
artwork: [{
src: cover,
sizes: '512x512',
type: 'image/jpg'
}]
});
}
}
function updatePositionState() {
if ('setPositionState' in navigator.mediaSession) {
navigator.mediaSession.setPositionState({
duration: song.duration,
playbackRate: song.playbackRate,
position: song.currentTime,
});
}
}
//change width and progress bar based current time
song.addEventListener('timeupdate', function() {
var position = song.currentTime / song.duration;
fillBar.style.width = position * 100 + '%';
var cTime = song.currentTime; //current time
var tTime = song.duration; //total time
localStorage.setItem("cTime", song.currentTime);
function realTime(songTime) {
var twoDeci = (songTime / 60).toFixed(2); //extracting time to 2 decimal points
seconds = Math.floor((twoDeci - Math.floor(twoDeci)) * 60); //converting to seconds
var minutes = Math.floor(songTime / 60) //convert to minutes
return minutes + ":" + seconds;
}
if (cTime === tTime) {
song.currentTime = 0;
$("#audio .glyphicon").classList.remove("glyphicon-pause");
$("#audio .glyphicon").classList.add("glyphicon-play");
nextSong();
}
$("#cTime").innerHTML = realTime(cTime);
$("#tTime").innerHTML = realTime(tTime);
});
//when user changes manually
$("#seek-bar").addEventListener('click', function(e) {
var manualPosition = e.offsetX / $("#seek-bar").offsetWidth;
fillBar.style.width = manualPosition * 100 + '%';
song.currentTime = (manualPosition * song.duration);
});
//set Volume to max
var volume = 1;
song.volume = volume;
//set volume to user defined value
$("#volume").addEventListener('click', function(e) {
volume = e.offsetX / $("#volume").offsetWidth;
if (volume < 0.1) {
volume = 0;
}
if (volume > 0.9) {
volume = 1;
}
$("#volume-line").style.width = volume * 100 + '%';
song.volume = volume;
var volumeIcon = $("#volume-icon");
volumeIcon.className = '';
if (volume > 0.7) {
volumeIcon.classList.add('glyphicon', 'glyphicon-volume-up');
} else if (volume < 0.7 && volume > 0) {
volumeIcon.classList.add('glyphicon', 'glyphicon-volume-down');
} else if (volume === 0) {
volumeIcon.classList.add('glyphicon', 'glyphicon-volume-off');
}
});
$("#volume-icon").addEventListener('click', function() {
var volumeIcon = $("#volume-icon");
volumeIcon.className = '';
if (song.volume) {
endVolume = song.volume;
song.volume = 0;
volumeIcon.classList.add('glyphicon', 'glyphicon-volume-off');
volumeIcon.setAttribute('title', 'Unmute');
$("#volume-line").style.width = 0 + '%';
} else {
song.volume = endVolume;
volumeIcon.classList.add('glyphicon', 'glyphicon-volume-up');
volumeIcon.setAttribute('title', 'Mute');
$("#volume-line").style.width = endVolume * 100 + '%';
}
});
localStorage.setItem("song", song.src);
localStorage.setItem("artwork", "<?php echo "./album_images/$image"; ?>");
localStorage.setItem("artist", "<?php echo $artist; ?>");
localStorage.setItem("title", "<?php echo $title; ?>");
</script>
<script>
const cover = '<?php echo "album_images/$image"; ?>';
const title = document.querySelector('.title').textContent;
const artist = document.querySelector('.artist').textContent;
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', () => {
song.play();
updatePositionState();
$("#audio .glyphicon").classList.remove("glyphicon-play");
$("#audio .glyphicon").classList.add("glyphicon-pause");
});
navigator.mediaSession.setActionHandler('pause', () => {
song.pause();
updatePositionState();
$("#audio .glyphicon").classList.remove("glyphicon-pause");
$("#audio .glyphicon").classList.add("glyphicon-play");
});
navigator.mediaSession.setActionHandler('seekbackward', (details) => {
song.currentTime = Math.max(song.currentTime - (details.seekOffset || 10), 0);
});
navigator.mediaSession.setActionHandler('seekforward', (details) => {
song.currentTime = Math.min(song.currentTime + (details.seekOffset || 10), song.duration);
});
navigator.mediaSession.setActionHandler('previoustrack', () => {
previousSong();
});
navigator.mediaSession.setActionHandler('nexttrack', () => {
nextSong();
});
}
</script>
</html>