2021-03-31 08:38:30 +02:00
< ? 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 ());
}
2021-03-31 15:09:10 +02:00
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 ();
2021-03-31 08:38:30 +02:00
?>
<! 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 >
2021-04-01 08:57:34 +02:00
< ? php
include ( " $root /analytics/matomo.php " );
?>
2021-03-31 08:38:30 +02:00
< body >
< ? php include ( " $root /menu.php " ); ?>
< ? php include ( " $root /header.php " ); ?>
< section >
2021-03-31 15:09:10 +02:00
< h3 > Spectrograms </ h3 >
2021-03-31 08:38:30 +02:00
< ? php
?>
< div class = " sound " >
2021-03-31 15:09:10 +02:00
< h3 >< ? = $data [ 'file_name' ] ?> </h3>
< h4 >< em >< ? = $data [ 'species' ] ?> </em></h4>
< p > Recorded on < ? = $data [ 'date' ] ?> at <?=$data['time']?></p>
2021-03-31 08:38:30 +02:00
< ? php
2021-03-31 15:09:10 +02:00
if ( file_exists ( $root . " /storage/spectrograms/ " . $data [ 'file_name' ] . '.png' ))
2021-03-31 08:38:30 +02:00
{
?>
2021-03-31 15:09:10 +02:00
<!-- < img id = " spectrogram " src = " <?= " / storage / spectrograms / " . $data['file_name'] .'.png'?> " alt = " bat sound spectrogram " > -->
2021-03-31 08:38:30 +02:00
< ? php
}
?>
2021-04-08 12:44:50 +02:00
< div id = " waveform " ></ div >
< div id = " wave-spectrogram " ></ div >
<!-- < canvas class = " spectrogram " ></ canvas > -->
<!-- < canvas class = " waveform " ></ canvas > -->
2021-03-31 15:09:10 +02:00
2021-03-31 08:38:30 +02:00
< br >
2021-03-31 15:09:10 +02:00
< 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>
2021-03-31 08:38:30 +02:00
</ div >
</ section >
< ? php include ( " $root /footer.php " ); ?>
2021-03-31 15:09:10 +02:00
< 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 >
2021-03-31 08:38:30 +02:00
</ body >
</ html >
