ringvibe/testaudio.html at master · ctomni231/ringvibe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<body style='font-size:40px'>
<div id=lockeddiv style='font-style:italic'></div>
<div id=messagediv style='font-style:italic'>Tap for music.</div>
<script>
var music = new Audio("fallen.mp3")
var chime = new Audio("maptick.wav")
var nothing = new Audio("maptick.wav")
var allAudio = []
allAudio.push(music)
allAudio.push(chime)

var tapped = function() {
messagediv.innerHTML = "tapped"

// Play all audio files on the first tap and stop them immediately.
if(allAudio) {
for(var audio of allAudio) {
audio.play()
audio.pause()
audio.currentTime = 0
}
allAudio = null
}

// We should be able to play music delayed now (not during the tap event).
messagediv.innerHTML = "Music starts in 2 seconds..."
setTimeout(function() {
messagediv.innerHTML = "Music playing. <button onclick='stop()'>Stop</button>"
music.play()
}, 2000)

}
document.body.addEventListener('touchstart', tapped, false)
document.body.addEventListener('click', tapped, false)

var stop = function() {
music.pause()
loop = null
document.body.removeEventListener('touchstart', tapped, false)
document.body.removeEventListener('click', tapped, false)
}

// Check if audio starts already unlocked by playing a blank wav.
nothing.play().then(function() {
lockeddiv.innerHTML = "Audio started unlocked!"
}).catch(function(){
lockeddiv.innerHTML = "Audio started locked :("
})

var loop = function() {
// Try to play chimes whenever we want (not during user action).
if(Math.random() < .01) {
chime.play().then(function(){
lockeddiv.innerHTML = "Audio is now unlocked!"
})
}
setTimeout(loop, 16)
}
loop()
</script>
<div style='height:70vh;background:#EFE'>
The rest of the webpage takes up all of this space.
On Safari audio will start on the first tap anywhere.
On Chrome it will try to determine if the user has interacted much with this page or this domain, before playing.
</div>
</body>
</html>