NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Wavesurfer voor audio file player

Browse Source
This commit is contained in:
NH Gooi
2024-09-25 17:30:15 +02:00
parent 1dadbc62af
commit 6c732f90e8
7 changed files with 138 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/RadioController.php
View File

@@ -95,7 +95,7 @@ class RadioController extends Controller
{ {
$programs = []; $programs = [];
$now = new \DateTimeImmutable('2 minutes ago'); $now = new \DateTimeImmutable('2 minutes ago');
$page = (int)$request->get('pagina', 1); $page = (int)$request->get('pagina', 1);
$apiResult = $this->API('programma/schema/recent?pagina=' . (int)max(1, $page) . '&aantal=12'); $apiResult = $this->API('programma/schema/recent?pagina=' . (int)max(1, $page) . '&aantal=12');
foreach($apiResult->schedule as $item) { foreach($apiResult->schedule as $item) {
if(!$item->program->nonstop && !$item->program->rerun) { if(!$item->program->nonstop && !$item->program->rerun) {

17
app/Http/Controllers/StreamController.php
View File

@@ -14,6 +14,8 @@ class StreamController extends Controller
return view('listen', [ return view('listen', [
'source' => self::$STREAM_URL . 'mp3live', 'source' => self::$STREAM_URL . 'mp3live',
'title' => 'Luister live', 'title' => 'Luister live',
'lengte' => 0,
'waveform' => null,
'content' => 'de live-uitzending van NH Gooi.', 'content' => 'de live-uitzending van NH Gooi.',
'isStream' => true ]); 'isStream' => true ]);
} }
@@ -53,13 +55,20 @@ class StreamController extends Controller
'source' => $this->API_URL . 'podcast/stream/' . $apiResult->url, 'source' => $this->API_URL . 'podcast/stream/' . $apiResult->url,
'title' => $podcast->title, 'title' => $podcast->title,
'content' => $podcast->title, 'content' => $podcast->title,
'lengte' => $podcast->duration / 1000,
'waveform' => $podcast->waveform,
'isStream' => false, 'isStream' => false,
'canDownload' => $this->API_URL . 'podcast/download/' . $apiResult->url ]); 'canDownload' => $this->API_URL . 'podcast/download/' . $apiResult->url ]);
} }
public function program(Request $request, $year, $month, $day, $hour, $duration, $offset = 0) { public function program(Request $request, $year, $month, $day, $hour, $duration, $offset = 0) {
$date = (new \DateTimeImmutable())->setDate($year, $month, $day)->setTime($hour, 0, 0); $date = (new \DateTimeImmutable())->setDate($year, $month, $day)->setTime($hour, 0, 0);
$current = $date->add(\DateInterval::createFromDateString($offset . ' hours')); $current = $date->add(\DateInterval::createFromDateString($offset . ' hours'));
$programma = $this->API("programma/details/" . $current->Format("Y/m/d/H"));
if(!$programma->is_beschikbaar) {
return view('listen', ['notAvailable' => true]);
}
$hours = []; $hours = [];
for($i = 0; $i < $duration; $i++) { for($i = 0; $i < $duration; $i++) {
@@ -69,10 +78,12 @@ class StreamController extends Controller
} }
return view('listen', [ return view('listen', [
'source' => $this->API_URL . 'programma/stream/' . $current->format('Y/m/d/H') . '/1', 'source' => $this->API_URL . 'programma/stream/' . $current->format('Y/m/d/H'),
'tabs' => $hours, 'tabs' => $hours,
'title' => 'Uitzending terugluisteren', 'title' => 'Uitzending terugluisteren',
'content' => 'de uitzending van ' . $current->format('d-m-Y, H') . ':00 uur', 'lengte' => $programma->waveform->length,
'waveform' => $programma->waveform,
'content' => $programma->programma->name . ' van ' . $current->format('d-m-Y, H') . ':00 uur',
'isStream' => false, 'isStream' => false,
'canDownload' => false ]); 'canDownload' => false ]);
} }

1
public/js/wavesurfer.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
resources/views/layouts/master.blade.php
View File

@@ -203,7 +203,7 @@
function openPlayerInNewScreen() { function openPlayerInNewScreen() {
$(".player").click(function (e) { $(".player").click(function (e) {
e.preventDefault(); e.preventDefault();
window.open($(this).attr('href'), '_player', 'width=550,height=500,titlebar,close'); window.open($(this).attr('href'), '_player', 'width=550,height=600,titlebar,close');
return false; return false;
}); });
} }

11
resources/views/listen.blade.php
View File

@@ -4,8 +4,8 @@
<a href="javascript:window.close();" class="close btn"><span class='fa fa-times fa-fw'></span> Venster sluiten</a> <a href="javascript:window.close();" class="close btn"><span class='fa fa-times fa-fw'></span> Venster sluiten</a>
<p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo-NHGooi.svg' )}}"></a></p> <p class="logo"><a href="{{ url('/') }}"><img src="{{ url( 'images/logo-NHGooi.svg' )}}"></a></p>
@if(false && $isStream) @if(isset($notAvailable) && $notAvailable)
<p>Wegens een technisch probleem is NH Gooi momenteel niet via Internet te beluisteren. Onze excuses voor het <p>Helaas is de door u gekozen audio momenteel niet via Internet te beluisteren. Onze excuses voor het
ongemak.</p> ongemak.</p>
<p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p> <p>In Hilversum, Huizen en de BEL-gemeenten zijn wij te ontvangen op 92.0 FM of 105.1 FM.</p>
@else @else
@@ -41,9 +41,10 @@
</audio> --}} </audio> --}}
@include('widgets.audioplayer', [ @include('widgets.audioplayer', [
'source' =>str_replace("stream", "download", $source), 'source' => $source,
'lengte' => 0, 'isStream' => $isStream,
'waveform' => [] 'lengte' => $lengte,
'waveform' => $waveform
]) ])
</p> </p>

3
resources/views/podcastitem.blade.php
View File

@@ -113,6 +113,7 @@
<div class="announcement"> <div class="announcement">
@include("widgets.audioplayer", [ @include("widgets.audioplayer", [
'isStream' => false,
'source' => $streamUrl, 'source' => $streamUrl,
'lengte' => $podcast->duration / 1000, 'lengte' => $podcast->duration / 1000,
'waveform' => $podcast->waveform 'waveform' => $podcast->waveform
@@ -122,7 +123,7 @@
<a class="action_button btn" href="{{$audioUrl}}" title="Download dit fragment als MP3"> <a class="action_button btn" href="{{$audioUrl}}" title="Download dit fragment als MP3">
<span>Download fragment</span> <span>Download fragment</span>
</a> </a>
<a class="action_button btn player" href="{{$popoutUrl}}"> <a class="action_button btn player" href="{{$popoutUrl}}" onclick="pause()">
<span>Luister in nieuw venster</span> <span>Luister in nieuw venster</span>
</a> </a>
</div> </div>

171
resources/views/widgets/audioplayer.blade.php
View File

@@ -1,31 +1,23 @@
<?php $id = uniqid('player_'); ?> <?php $id = uniqid('player_'); ?>
<div class="audioplayer" id="{{ $id }}"> <div class="audioplayer" id="{{ $id }}">
{{-- @if(!$isStream)
<label for="lengte" class="col-12 col-sm-2 col-form-label">Lengte</label>
<div class="col-12 col-sm-10 my-auto">
@if( $lengte > 60)
{{ floor($lengte / 60) }} minuten en {{ floor(($lengte % 60)) }} seconden
@else
{{ $lengte }} seconden
@endif
</div>
--}}
<div class="waveform"> <div class="waveform">
<div class="time">0:00</div> <div class="time">0:00</div>
<div class="duration">0:00</div> <div class="duration">0:00</div>
<div class="hover"></div> <div class="hover"></div>
</div> </div>
@endif
<div class="volume-controls"> <div class="volume-controls">
<button class="btn-toggle-mute" type="button"> <button class="btn-toggle-mute" type="button" onclick="toggleMute()">
<span class="fa fa-volume-high"></span> <span class="fa fa-volume-high"></span>
</button> </button>
<input class="volume-slider" type="range" min="0" max="1" step="0.01" value="1" <input class="volume-slider" type="range" min="0" max="1" step="0.01" value="1"
onchange="wavesurfer_{{ $id }}.setVolume( this.value )" /> onchange="setVolume( this.value )" />
</div> </div>
<div class="audio-controls"> <div class="audio-controls">
@if(!$isStream)
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-60)"> <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(-60)">
<span class="fa fa-backward-fast"></span> <span class="fa fa-backward-fast"></span>
<label>-60 s</label> <label>-60 s</label>
@@ -34,10 +26,12 @@
<span class="fa fa-backward-step"></span> <span class="fa fa-backward-step"></span>
<label>-10 s</label> <label>-10 s</label>
</button> </button>
<button class="btn btn-play" type="button" onclick="wavesurfer_{{ $id }}.playPause()"> @endif
<button class="btn btn-play" type="button" onclick="playPause()">
<span class="play-button-icon fa fa-play"></span> <span class="play-button-icon fa fa-play"></span>
<label class="play-button-label">Afspelen</label> <label class="play-button-label">Afspelen</label>
</button> </button>
@if(!$isStream)
<button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(10)"> <button class="btn btn-jump" type="button" onclick="wavesurfer_{{ $id }}.skip(10)">
<span class="fa fa-forward-step"></span> <span class="fa fa-forward-step"></span>
<label>+10 s</label> <label>+10 s</label>
@@ -46,11 +40,80 @@
<span class="fa fa-forward-fast"></span> <span class="fa fa-forward-fast"></span>
<label>+60 s</label> <label>+60 s</label>
</button> </button>
@endif
</div> </div>
</div> </div>
@if($isStream)
<audio id="audio_{{ $id }}">
<source src="{{ $source }}" type="audio/mp3" />
</audio>
<script>
var player_{{ $id }};
setVolume = volume => player_{{ $id }}.volume = volume;
function toggleMute () {
var isMuted = !player_{{ $id }}.muted;
player_{{ $id }}.muted = isMuted;
if(isMuted) {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
$('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
} else {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
$('#{{ $id }} .volume-slider').removeAttr('disabled');
}
}
pause = () => player_{{ $id }}.pause();
function playPause() {
var player = player_{{ $id }};
if (player.paused) {
player.play();
} else {
player.pause();
}
}
addEventListener("DOMContentLoaded", function() {
var player = document.getElementById( "audio_{{ $id }}");
player_{{ $id }} = player;
$(player_{{ $id }}).on('play', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-pause').removeClass('fa-play');
$('#{{ $id }} .play-button-label').text('Pauzeren');
})
$(player_{{ $id }}).on('pause', () => {
$('#{{ $id }} .play-button-icon').addClass('fa-play').removeClass('fa-pause');
$('#{{ $id }} .play-button-label').text('Verder spelen');
});
});
</script>
@else
<script> <script>
var wavesurfer_{{ $id }}; var wavesurfer_{{ $id }};
setVolume = volume => wavesurfer_{{ $id }}.setVolume( volume );
playPause = () => wavesurfer_{{ $id }}.playPause();
pause = () => wavesurfer_{{ $id }}.pause();
function toggleMute () {
var isMuted = !wavesurfer_{{ $id }}.getMuted();
wavesurfer_{{ $id }}.setMuted(isMuted);
if(isMuted) {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
$('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
} else {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
$('#{{ $id }} .volume-slider').removeAttr('disabled');
}
}
addEventListener("DOMContentLoaded", function() { addEventListener("DOMContentLoaded", function() {
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
@@ -60,12 +123,15 @@
container: '#{{ $id }} .waveform', container: '#{{ $id }} .waveform',
waveColor: '#3A96EE', waveColor: '#3A96EE',
progressColor: '#0118A1', progressColor: '#0118A1',
height: 50,
barWidth: 1, barWidth: 1,
// duration: {{ $lengte }}, @if(isset($lengte))
// @if($waveform) duration: {{ $lengte }},
// peaks: {{ json_encode($waveform->data) }}, @endif
// normalize: true, @if($waveform)
// @endif peaks: {{ json_encode($waveform->data) }},
normalize: true,
@endif
url: '{{ $source }}', url: '{{ $source }}',
}); });
@@ -83,17 +149,6 @@
$('#{{ $id }} .play-button-label').text('Verder spelen'); $('#{{ $id }} .play-button-label').text('Verder spelen');
}) })
$('#{{ $id }} .btn-toggle-mute').on('click', () => {
var isMuted = !wavesurfer_{{ $id }}.getMuted();
wavesurfer_{{ $id }}.setMuted(isMuted);
if(isMuted) {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-xmark"></span>');
$('#{{ $id }} .volume-slider').attr('disabled', 'disabled');
} else {
$('#{{ $id }} .btn-toggle-mute').html('<span class="fa fa-volume-high"></span>');
$('#{{ $id }} .volume-slider').removeAttr('disabled');
}
});
// Hover effect // Hover effect
{ {
const hover = document.querySelector('#{{ $id }} .hover') const hover = document.querySelector('#{{ $id }} .hover')
@@ -103,28 +158,30 @@
// Current time & duration // Current time & duration
{ {
const formatTime = (seconds) => { const formatTime = (seconds) => {
const minutes = Math.floor(seconds / 60) const minutes = Math.floor(seconds / 60)
const secondsRemainder = Math.round(seconds) % 60 const secondsRemainder = Math.round(seconds) % 60
const paddedSeconds = `0${secondsRemainder}`.slice(-2) const paddedSeconds = `0${secondsRemainder}`.slice(-2)
return `${minutes}:${paddedSeconds}` return `${minutes}:${paddedSeconds}`
} }
const timeEl = document.querySelector('#{{ $id }} .time') const timeEl = document.querySelector('#{{ $id }} .time')
const durationEl = document.querySelector('#{{ $id }} .duration') const durationEl = document.querySelector('#{{ $id }} .duration')
wavesurfer_{{ $id }}.on('decode', (duration) => (durationEl.textContent = formatTime(duration))) wavesurfer_{{ $id }}.on('decode', (duration) => (durationEl.textContent = formatTime(duration)))
wavesurfer_{{ $id }}.on('timeupdate', (currentTime) => (timeEl.textContent = formatTime(currentTime))) wavesurfer_{{ $id }}.on('timeupdate', (currentTime) => (timeEl.textContent = formatTime(currentTime)))
} }
}); });
</script> </script>
@endif
<style> <style>
#{{ $id }} .waveform { .audioplayer .waveform {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
#{{ $id }} .hover { .audioplayer .hover {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -138,12 +195,12 @@
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
#{{ $id }} .waveform:hover .hover { .audioplayer .waveform:hover .hover {
opacity: 1; opacity: 1;
} }
#{{ $id }} .time, .audioplayer .time,
#{{ $id }} .duration { .audioplayer .duration {
position: absolute; position: absolute;
z-index: 11; z-index: 11;
top: 50%; top: 50%;
@@ -155,21 +212,21 @@
color: #ddd; color: #ddd;
} }
#{{ $id }} .time { .audioplayer .time {
left: 0; left: 0;
} }
#{{ $id }} .duration { .audioplayer .duration {
right: 0; right: 0;
} }
#{{ $id }} .audio-controls { .audioplayer .audio-controls {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
display: flex; display: flex;
} }
#{{ $id }} .audio-controls .btn { .audioplayer .audio-controls .btn {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
overflow: hidden; overflow: hidden;
@@ -179,35 +236,33 @@
} }
@media(max-width:720px) { @media(max-width:720px) {
#{{ $id }} .audio-controls .btn label { .audioplayer .audio-controls .btn label {
display: none; display: none;
} }
} }
#{{ $id }} .audio-controls .btn.btn-play { .audioplayer .audio-controls .btn.btn-play {
flex: 50% 1 0; flex: 50% 1 0;
} }
#{{ $id }} .volume-controls { .audioplayer .volume-controls {
display: flex; display: flex;
} }
#{{ $id }} .volume-controls .volume-slider .audioplayer .volume-controls .volume-slider {
{
flex: 100% 1 1; flex: 100% 1 1;
} }
#{{ $id }} .audio-controls .btn, .audioplayer .audio-controls .btn,
#{{ $id }} .volume-controls .btn-toggle-mute { .audioplayer .volume-controls .btn-toggle-mute {
flex: 100px 1 1; flex: 100px 1 1;
padding: 10px 0px 10px 0px; padding: 10px 0px 10px 0px;
background: #5ba8f4; background: #5ba8f4;
border-radius: 5px; border-radius: 5px;
border-color: solid 1px #0f259d; border-color: solid 1px #0f259d;
color: white; color: white;
font-family: Nunito, serif; font-family: Nunito, serif;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }
</style> </style>