gabriel
/
shortcodes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update audio player to properly use spritesheet

Browse Source
main
Gabriel 3 months ago
parent 30eecfe770
commit 27c1eca09e
4 changed files with 113 additions and 98 deletions
Show Stats Download Patch File Download Diff File

195
audio.html
Unescape Escape View File

@ -1,103 +1,23 @@
<style>
.audio-player {
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
width: 100%;
}
.audio-player>*{
height:fit-content;
padding:0.25rem;
}
.audio-player p{
width: fit-content;
}
.media-seek {
width: 100%;
}
.audio-player{
border: 0.15rem solid var(--theme-accent);
padding:0.5rem;
border-radius: 0.5rem;
color:var(--theme-accent);
flex-wrap: nowrap;
}
.audio-player>*{
margin:5px;
}
.audio-player select, .audio-player button{
background-color: transparent;
border-color: var(--theme-accent);
color:var(--theme-accent);
border-radius: 3px;
padding:0.5rem;
}
.icon svg{
width:2.25rem;
height:2.25rem;
z-index: -1;
background-color: transparent;
pointer-events: none;
}
.icon path,
.icon rect {
stroke: var(--theme-accent);
fill: var(--theme-accent);
}
.icon svg circle {
stroke: var(--theme-accent);
fill: transparent;
stroke-width: 6;
}
@keyframes spin-icon {
0%{rotate:0;}
100%{rotate:360deg;}
}
.spin{
animation:spin-icon 3s linear infinite;
}
</style>
<div class="media-container">
<div class="audio-player">
<audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
<div class="icon" onclick="toggle_play_audio(event)">
<svg viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
</div>
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
<select onchange="update_audio_speed(event)">
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
</select>
<div class="audio-preview">
</div>
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
<div class="icon" onclick="toggle_loop_audio(event)">
<svg viewBox="0 0 120 120" version="1.1"> <circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z" id="path4435" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z" id="path4435-7" /></svg>
</div>
<script src="/js/icons.js"></script>
<script>
<script>
function audio_end(event){
p = event.target.parentElement;
if (!event.target.loop){
p.children[1].innerHTML=icons['play'];
}
}
function setup_display(event){
el = event.target.children[0];
el.style.display="flex";
console.log("Display audio")
}
function setup_audio_metadata(event) {
audio = event.target;
audio=event.target;
var seek = audio.parentElement.children[2];
seek.min = 0;
seek.max = audio.duration;
seek.value = audio.currentTime;
audio.parentElement.children[3].style.display="block";
audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
}
@ -122,11 +42,11 @@
audio.playbackRate = speed;
if (audio.paused) {
audio.play();
el.innerHTML = icons['pause'];
el.children[0].children[0].setAttribute("href","#pause");
}
else {
audio.pause();
el.innerHTML = icons['play'];
el.children[0].children[0].setAttribute("href","#play")
}
}
function update_audio_speed(event) {
@ -173,7 +93,98 @@
text += seconds
return text;
}
</script>
</script>
<style>
.audio-player {
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
width: 100%;
}
.audio-player>*{
margin:2px;
margin-right:5px;
margin-left:5px;
}
.audio-player p{
width: fit-content;
}
.media-seek {
width: 100%;
}
.audio-player{
border: 0.15rem solid var(--theme-accent);
padding:0.5rem;
border-radius: 0.5rem;
color:var(--theme-accent);
flex-wrap: nowrap;
}
.audio-player>*{
margin:5px;
}
.audio-player select, .audio-player button{
background-color: transparent;
border-color: var(--theme-accent);
color:var(--theme-accent);
border-radius: 3px;
padding:0.5rem;
}
.icon svg{
width:2.25rem;
height:2.25rem;
z-index: -1;
background-color: transparent;
pointer-events: none;
}
.icon path,
.icon rect {
stroke: var(--theme-accent);
fill: var(--theme-accent);
}
.icon svg circle {
stroke: var(--theme-accent);
fill: transparent;
stroke-width: 6;
}
@keyframes spin-icon {
0%{rotate:0;}
100%{rotate:360deg;}
}
.spin{
animation:spin-icon 3s linear infinite;
}
</style>
<div class="media-container" onload="setup_display(event)">
<div class="audio-player">
<audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
<div class="icon" onclick="toggle_play_audio(event)">
<svg>
<use href="#play"></use>
</svg>
</div>
<input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
<select onchange="update_audio_speed(event)" style="display:none;">
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
<option value="2.5">2.5x</option>
<option value="3">3x</option>
</select>
<div class="audio-preview">
</div>
<p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
<div class="icon" onclick="toggle_loop_audio(event)">
<svg>
<use href="#loop"></use>
</svg>
</div>
</div>
<noscript>
<style>
@ -181,7 +192,7 @@
display: none;
}
</style>
<audio controls preload="false">
<audio controls preload="false" style="width:100%;min-width:40vw;">
<source src='{{.Site.BaseURL}}{{.Get "src" }}'>
</audio>
</noscript>

3
readme.md
Unescape Escape View File

@ -1,6 +1,8 @@
# Shortcodes
My hugo shortcodes for all my themes
More work is needed for them to be portable!
Currently tehy rely on [this svg spritesheet](https://code.gabe.rocks/gabriel/freedom/raw/branch/main/layouts/partials/spritesheet.html)
## Themes
@ -42,3 +44,4 @@ Embeds a pdf
A video player with controls
(This needs improvements)

1
video.html
Unescape Escape View File

@ -64,7 +64,6 @@
width: 100vw;
}
</style>
<script src="/js/icons.js"></script>
<div class="video-container">
<div class="video-player">
<video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"

2
webtorrent-video.html
Unescape Escape View File

@ -1,3 +1,5 @@
<h1> Was unable to get this to work </h1>
<p>Review needed</p>
<style>
#wtmedia{
width:100%;

Write Preview
Loading…
Cancel
Save