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

added the seprataed audio

Browse Source
This commit is contained in:
nglk 2021-03-05 18:12:57 +01:00
parent 85dbc1e9ae
commit afb5d8cb08
1 changed files with 30 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
index.html
View File

@ -43,10 +43,10 @@
<div class="col-md-12">
<br>
<div class="map_legend">
<div id="box1" onclick="popup_bg(600,86000)"><i class="box fa fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(1465,30500)"><i class="box fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(0,60000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(0,1000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
<div id="box1" onclick="popup_box('audio1','b1')"><i class="b1 fa fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_box('audio2','b2')"><i class="b2 fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_box('audio3','b3')"><i class="b3 fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
<div id="box4"><i class="box4 fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
@ -59,6 +59,20 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
<source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
</audio>
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
<audio id="audio1"
preload="metadata">
<source src="static/audio/Hp_website_soundtracks_folklore.mp3">
</audio>
<audio id="audio2"
preload="metadata">
<source src="static/audio/Hp_website_soundtracks_islamicMystcism.mp3">
</audio>
<audio id="audio3"
preload="metadata">
<source src="static/audio/Hp_website_soundtracks_poets.mp3">
</audio>
</div>
</div>
@ -190,23 +204,6 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
<!-- scripts for mouse events -->
<script>
// function popup_bg(start,end) {
// var myIcon = document.querySelector(".audioBG");
// var box = document.getElementById("audioBG");
// if (box.paused) {
// box.currentTime = start;
// myIcon.className = "audioBG fa fa-pause";
// setTimeout(function(){
// box.play();
// console.log(box.currentTime);
// }, end);
// }
// // box.currentTime = start;
// // console.log(start);
// }
// function popup_bg(start,end){
// var myIcon = document.querySelector(".audioBG");
@ -215,25 +212,20 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
// myIcon.className = "audioBG fa fa-pause";
// box.play();
// console.log(box.currentTime);
// setInterval(function(){
// if(box.currentTime>end){
// myIcon.className = "audioBG fa fa-play";
// box.pause();
// console.log(box.currentTime);
// }
// },1000);
// setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
// }
function popup_bg(start,end){
var myIcon = document.querySelector(".audioBG");
var box = document.getElementById("audioBG");
box.currentTime = start;
myIcon.className = "audioBG fa fa-pause";
box.play();
console.log(box.currentTime);
setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
}
function popup_box(audioid,box){
var myIcon = document.querySelector("."+box);
var audio = document.getElementById(audioid);
if (audio.paused) {
myIcon.className = box+" fa fa-pause";
audio.play();
}else {
myIcon.className = box+" fa fa-play";
audio.pause();
}
}
</script>