alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

webm audio

Browse Source
This commit is contained in:
alicestrt 2021-01-06 18:38:58 +01:00
parent bc6f5999d8
commit c7fd3786c1
3 changed files with 14 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/fontawesome.css" crossorigin="anonymous">
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/jquery-ui.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
@ -23,20 +23,15 @@
<div class="col-md-9" style="position: static;">
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
<audio controls id='audioBG'>
<source src="static/audio/output.webm" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
<div class="map_legend">
<div id="box1" onclick="popup_bg(120)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
<div id="box1" onclick="popup_bg(10)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(300)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(500)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
@ -118,29 +113,14 @@ Technical details: We have built the visualization from scratch using a javascri
</div>
<!-- scripts for mouse events -->
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
<script>
function popup_bg(time) {
var box = document.getElementById("audioBG");
console.log(time);
box.currentTime = time;
box.play();
btn.innerHTML = "(Pause)";
if (box.paused) {
box.play();
};
box.currentTime = time;
};
</script>

5
static/css/fontawesome.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
static/css/style.css
View File

@ -296,9 +296,6 @@ h2 {
cursor: pointer;
}
.play-stop:hover {
color: #cdcec9;
}
/* circles */