| Server IP : 162.0.232.25 / Your IP : 3.137.171.71 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 `tbl_uploads` WHERE `id`='$id'";
if ($sql_run = mysqli_query($conn, $sqli)) {
if (list($listened) = mysqli_fetch_array($sql_run)) {
$increment = ++$listened;
$Sqli2 = "UPDATE `tbl_uploads` SET `listened`='$increment' WHERE `id`='$id'";
$sql2_run = mysqli_query($conn, $Sqli2);
$sql = "SELECT `file`,`image`,`artist`,`title`,`verify` FROM `tbl_uploads` WHERE `id`='" . mysqli_real_escape_string($conn, $id) . "'";
if ($query_run = mysqli_query($conn, $sql)) {
list($music, $image, $artist, $title, $verify) = mysqli_fetch_array($query_run);
} else {
die(mysqli_error($conn));
}
}
}
}
if ($verify == 0) {
die("
<html>
<head>
<title>Song Not Available</title>
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">
<meta charset=\"UTF-8\">
<link rel=\"shortcut icon\" href=\"Icons/malawisounds.ico\">
</head>
<body style=\"background-image:url(./Icons/404.jpg);width:100%;height:100%;background-size:cover;background-position:center center;;background-repeatno-repeat\">
<h3 style=\"font-size:25px;font-family:arial;color:red;min-height;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\"><center>OOPS! <br>SONG NOT ACTIVATED</center></h3>
</body>
</html>
");
}
?>
<!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-' . $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("images/<?php echo $image; ?>");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100%;
filter: blur(20px);
}
.symbol1 {
position: relative;
top: -1px;
left: 1.3px;
}
/* .bg_content{background-color: rgba(0,0,0,0.9);z-index:2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;} */
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>
<!--open graph codes-->
<meta property="og:url" content="https://malawisounds.com/songs.php?id=<?php echo $id; ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo "$title by $artist"; ?>" />
<meta property="og:image" content="https://malawisounds.com/images/<?php echo $image; ?>" />
<meta property="og:description" content="Stream" />
<meta property="fb:app_id" content="197362031139140" />
</head>
<body>
<!-- background image -->
<div class="bg_img"></div>
<!-- background content -->
<div class="bg_content">
<div class="canvas-cover">
<img src="./images/<?php echo $image; ?>">
<!-- Canvas area -->
<canvas id="aCanvas" class="visualiser" width="500" height="500"></canvas>
</div>
<!-- title -->
<div class="title"><?php echo "$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="play" id="audio" onclick="playOrPauseSong()">
<div class="symbol1 glyphicon glyphicon-play"></div>
</button>
</div>
<!-- Volume -->
<div class="vol">
<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);
}
var fillBar = $("#fill");
var song = new Audio("uploads/<?php echo $music; ?>");
//GLOBALS
var ctx;
var width, height;
var dataArray;
var analyser;
var run = true;
var hue = 0;
var hueAdd = 1;
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();
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 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 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);
updatePositionState();
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");
}
$("#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 "./images/$image"; ?>");
localStorage.setItem("artist", "<?php echo $artist; ?>");
localStorage.setItem("title", "<?php echo $title; ?>");
</script>
<script>
const cover = '<?php echo "images/$image"; ?>';
const title = document.querySelector('.title').textContent;
const artist = document.querySelector('.artist').textContent;
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: title,
artist: artist,
artwork: [{
src: cover,
sizes: '512x512',
type: 'image/jpg'
}]
});
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);
});
}
</script>
</html>