82 lines
2.7 KiB
PHP
82 lines
2.7 KiB
PHP
<?php
|
|
session_start();
|
|
ini_set('display_errors', 1);
|
|
ini_set('display_startup_errors', 1);
|
|
error_reporting(E_ALL);
|
|
$root = realpath($_SERVER["DOCUMENT_ROOT"]);
|
|
require "$root/database/credentials.php";
|
|
// Connect the database
|
|
try {
|
|
$db = new PDO("mysql:host=$host;dbname=$database;charset=utf8",
|
|
$user,
|
|
$password,
|
|
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
|
|
));
|
|
} catch (Exception $e) {
|
|
die("Error : ".$e->getMessage());
|
|
}
|
|
if (isset($_GET['record'])) {
|
|
$req = $db->prepare('SELECT id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` WHERE id=:id');
|
|
$req->execute(array(
|
|
"id"=>$_GET['record']
|
|
));
|
|
} else {
|
|
$req = $db->prepare('SELECT id, recordist_name, file_name, license, species, sound_type, date, time FROM `records` ORDER BY date DESC, time DESC LIMIT 1');
|
|
$req->execute();
|
|
}
|
|
$data = $req->fetch();
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Explore | Chiro - Canto</title>
|
|
<link rel="stylesheet" type="text/css" href="/styles/style.css">
|
|
</head>
|
|
<?php
|
|
include("$root/analytics/matomo.php");
|
|
?>
|
|
<body>
|
|
<?php include("$root/menu.php");?>
|
|
<?php include("$root/header.php");?>
|
|
<section>
|
|
<h3>Spectrograms</h3>
|
|
<?php
|
|
?>
|
|
<div class="sound">
|
|
<h3><?=$data['file_name']?></h3>
|
|
<h4><em><?=$data['species']?></em></h4>
|
|
<p>Recorded on <?=$data['date']?> at <?=$data['time']?></p>
|
|
<?php
|
|
if (file_exists($root."/storage/spectrograms/".$data['file_name'].'.png'))
|
|
{
|
|
?>
|
|
<!-- <img id="spectrogram" src="<?="/storage/spectrograms/".$data['file_name'].'.png'?>" alt="bat sound spectrogram"> -->
|
|
<?php
|
|
}
|
|
?>
|
|
<!-- <div id="waveform"></div>
|
|
<div id="wave-spectrogram"></div> -->
|
|
<canvas class="spectrogram"></canvas>
|
|
<canvas class="waveform"></canvas>
|
|
|
|
<br>
|
|
<audio src="<?="/storage/records/".$data['file_name']?>" id="audio"></audio>
|
|
<input type="button" name="play" value="play" id="play">
|
|
<input type="button" value="pause" id="pause">
|
|
<input type="button" value="restart" id="restart"><br>
|
|
<p><?=$data['license']?> <?=$data['recordist_name']?></p>
|
|
</div>
|
|
</section>
|
|
<?php include("$root/footer.php");?>
|
|
<br>
|
|
<script src="https://unpkg.com/wavesurfer.js"></script>
|
|
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js" type="text/javascript"></script>
|
|
<script src="scripts/spectro.js"></script>
|
|
<script src="/scripts/script.js"></script>
|
|
</body>
|
|
|
|
</html>
|