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

test to play and stop bg audio when clicking somewhere else didnt work

Browse Source
This commit is contained in:
nglk 2020-10-26 19:10:41 +01:00
parent 85c04a9a33
commit 4f98414710
3 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
static/css/style.css
View File

@ -48,6 +48,17 @@
}
/* Audio in background */
.audio-button {
background: white;
}
.audio-button:hover {
background: grey;
cursor: pointer;
}
/* Node styling */
#ahmed text {

16
static/js/d3_map.js vendored
View File

@ -108,9 +108,9 @@ d3.json("/static/js/group1.json", function(error, json) {
var dada = document.getElementById("textdadaloglu");
dada.className += " active";
dada.scrollIntoView();
var audio1 = document.getElementById("audio-1");
var audio1 = document.getElementById("audioBG");
audio1.currentTime = 12;
// audio1.play();
audio1.play();
});
@ -120,12 +120,12 @@ d3.json("/static/js/group1.json", function(error, json) {
var muh = document.getElementById("textasikA");
muh.className += " active";
muh.scrollIntoView();
var audio2 = document.getElementById("audio-1");
audio2.currentTime = 50;
// audio2.play();
var audio2 = document.getElementById("audioBG");
audio2.currentTime = 120;
audio2.play();
});
//pop-up
//stop events when clicking somewhere else
$(document).click(function (e) {
if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
$("#showdadaloglu").fadeOut();
@ -135,10 +135,12 @@ d3.json("/static/js/group1.json", function(error, json) {
};
if (!$(e.target).parents().andSelf().is('#asikA')) {
$("#showasikA").fadeOut();
$("audioasikA").trigger('pause');
$("#audioasikA").trigger('pause');
var textmuh = document.getElementById("textasikA");
textmuh.classList.remove("active");
};
});
});

27
templates/hello.html
View File

@ -40,12 +40,13 @@
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0 / 0</div>
<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='audio1' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (currentTime - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration);">
<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">
Your browser does not support the audio tag.
</audio>
@ -56,25 +57,7 @@
</div>
<!-- scripts for mouse events -->
<script>
// function popup(d) {
// $(d).click(function(){
// $("#show1").fadeIn()
// console.log("around")
// })};
// function scrolldiv() {
// var elem = document.getElementById("ele");
// elem.scrollIntoView();
// }
// function play() {
// var audio = document.getElementById("audio-1");
// audio.currentTime = 12;
// audio.play();
// }
var audio = document.getElementById("audio1");
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {