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"> <div class="col-md-12">
<br> <br>
<div class="map_legend"> <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="box1" onclick="popup_box('audio1','b1')"><i class="b1 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="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_bg(0,60000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</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" onclick="popup_bg(0,1000)"><i class="box fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p> <div id="box4"><i class="box4 fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
</div> </div>
</div> </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"> <source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
</audio> </audio>
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px"> <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>
</div> </div>
@ -190,23 +204,6 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
<!-- scripts for mouse events --> <!-- scripts for mouse events -->
<script> <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){ // function popup_bg(start,end){
// var myIcon = document.querySelector(".audioBG"); // var myIcon = document.querySelector(".audioBG");
@ -215,25 +212,20 @@ $(".draggable i.remove-elem").off('click').on("click", function(){
// myIcon.className = "audioBG fa fa-pause"; // myIcon.className = "audioBG fa fa-pause";
// box.play(); // box.play();
// console.log(box.currentTime); // console.log(box.currentTime);
// setInterval(function(){ // setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end);
// if(box.currentTime>end){
// myIcon.className = "audioBG fa fa-play";
// box.pause();
// console.log(box.currentTime);
// }
// },1000);
// } // }
function popup_bg(start,end){ function popup_box(audioid,box){
var myIcon = document.querySelector(".audioBG"); var myIcon = document.querySelector("."+box);
var box = document.getElementById("audioBG"); var audio = document.getElementById(audioid);
box.currentTime = start; if (audio.paused) {
myIcon.className = "audioBG fa fa-pause"; myIcon.className = box+" fa fa-pause";
box.play(); audio.play();
console.log(box.currentTime); }else {
setTimeout(() => { myIcon.className = "audioBG fa fa-play";box.pause(); console.log(box.currentTime);}, end); myIcon.className = box+" fa fa-play";
} audio.pause();
}
}
</script> </script>