heckyel/mediagoblin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show spectrogram if javascript is enabled

Browse Source
This commit is contained in:
Jesús 2022-03-01 01:17:56 +08:00
parent 91e15714e1
commit d8d2139321
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
mediagoblin/templates/mediagoblin/media_displays/audio.html
View File

@ -21,25 +21,44 @@
{% block mediagoblin_head %} {% block mediagoblin_head %}
{{ super() }} {{ super() }}
<link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/audio.css') }}" /> <link rel="stylesheet" type="text/css" href="{{ request.staticdirect('/css/audio.css') }}" />
<script type="text/javascript" src="{{ request.staticdirect( <style>
'/js/audio.js') }}"></script> .hidden-spectrogram {
display: none;
}
.hidden-legacy-audio-player {
display: none;
}
</style>
{% endblock %} {% endblock %}
{% block mediagoblin_media %} {% block mediagoblin_media %}
<div class="media_other_container"> <div class="media_other_container">
<div class="audio-media"> <div class="audio-media">
{% if 'spectrogram' in media.media_files %} {% if 'spectrogram' in media.media_files %}
<div class="audio-spectrogram"> <div class="audio-spectrogram hidden-spectrogram" id="spectrogram">
<div class="playhead"></div> <div class="playhead"></div>
<div class="buffered-indicators"></div> <div class="buffered-indicators"></div>
<div class="seekbar"></div> <div class="seekbar"></div>
<button class="audio-control-play-pause paused" aria-label="Play">▶</button> <button class="audio-control-play-pause paused" aria-label="Play">▶</button>
<div class="audio-currentTime" aria-label="current time">00:00</div> <div class="audio-currentTime" aria-label="current time">00:00</div>
<input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" aria-label="volume" /> <input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" aria-label="volume" />
<img src="{{ request.app.public_store.file_url( <img src="{{ request.app.public_store.file_url(media.media_files.spectrogram) }}" alt="Spectrogram" />
media.media_files.spectrogram) }}"
alt="Spectrogram" />
</div> </div>
<!-- Audio legacy player -->
<audio class="audio-player" controls="controls" preload="metadata" id="legacy-audio-player">
<source src="{{ request.app.public_store.file_url(media.media_files.webm_audio) }}" type="audio/webm; codecs=vorbis" />
</audio>
<!-- Spectre audio JS -->
<script src="{{ request.staticdirect('/js/audio.js') }}"></script>
<!-- Tools -->
<script>
/* Show spectrogram if javascript is enabled */
let spectrogram = document.getElementById('spectrogram');
spectrogram.classList.remove('hidden-spectrogram');
/* Hidden audio-legacy if javascript is enabled */
let legacyPlayer = document.getElementById('legacy-audio-player');
legacyPlayer.classList.add('hidden-legacy-audio-player');
</script>
{% endif %} {% endif %}
<audio class="audio-player" controls="controls" <audio class="audio-player" controls="controls"
preload="metadata"> preload="metadata">