nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #45 from LoveEevee/fix-audioctx-safari

Browse Source 
Loader: Fallback to wav if ogg is not supported
This commit is contained in:
Bui 2018-10-07 20:07:03 +01:00 committed by GitHub
commit 680b41d650
5 changed files with 86 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/src/js/assets.js
View File

@ -112,6 +112,7 @@ var assets = {
"bgm_result.ogg",
"bgm_setsume.ogg"
],
"audioOgg": "note_ka.ogg",
"fonts": [
"Kozuka",
"TnT"

9
public/src/js/circle.js
View File

@ -31,11 +31,9 @@ class Circle{
getLastFrame(){
return this.lastFrame
}
incFrame(){
this.lastFrame += 20
}
animate(){
animate(ms){
this.animating = true
this.animT = ms
}
isAnimated(){
return this.animating
@ -43,9 +41,6 @@ class Circle{
getAnimT(){
return this.animT
}
incAnimT(){
this.animT += 0.05
}
getPlayed(){
return this.isPlayed
}

5
public/src/js/game.js
View File

@ -241,6 +241,7 @@ class Game{
this.globalScore.points += score
}
checkDrumroll(circle){
var ms = this.elapsedTime
var dai = circle.getType() === "daiDrumroll"
var score = 100
circle.hit()
@ -252,14 +253,14 @@ class Game{
}
var circleAnim = new Circle({
id: 0,
start: this.elapsedTime,
start: ms,
type: sound,
txt: "",
speed: circle.speed,
gogoTime: circle.gogoTime
})
circleAnim.played(score, dai)
circleAnim.animate()
circleAnim.animate(ms)
this.controller.view.drumroll.push(circleAnim)
this.globalScore.drumroll++
this.globalScore.points += score * (dai ? 2 : 1)

127
public/src/js/loader.js
View File

@ -11,29 +11,7 @@ class Loader{
this.screen.innerHTML = page
this.loaderPercentage = document.querySelector("#loader .percentage")
this.loaderProgress = document.querySelector("#loader .progress")
assets.fonts.forEach(name => {
var font = document.createElement("h1")
font.style.fontFamily = name
font.appendChild(document.createTextNode("I am a font"))
this.assetsDiv.appendChild(font)
this.promises.push(new Promise((resolve, reject) => {
FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
}))
})
var fontDetectDiv = document.getElementById("fontdetectHelper")
fontDetectDiv.parentNode.removeChild(fontDetectDiv)
assets.img.forEach(name => {
var id = this.getFilename(name)
var image = document.createElement("img")
this.promises.push(pageEvents.load(image))
image.id = name
image.src = "/assets/img/" + name
this.assetsDiv.appendChild(image)
assets.image[id] = image
})
snd.buffer = new SoundBuffer()
snd.musicGain = snd.buffer.createGain()
snd.sfxGain = snd.buffer.createGain()
@ -48,46 +26,79 @@ class Loader{
)
snd.sfxLoudGain.setVolume(1.2)
assets.audioSfx.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain))
})
assets.audioMusic.forEach(name => {
this.promises.push(this.loadSound(name, snd.musicGain))
})
assets.audioSfxLR.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => {
snd.buffer.load("/assets/audio/" + assets.audioOgg).then(() => {
this.oggNotSupported = false
}, () => {
this.oggNotSupported = true
}).then(() => {
assets.fonts.forEach(name => {
var font = document.createElement("h1")
font.style.fontFamily = name
font.appendChild(document.createTextNode("I am a font"))
this.assetsDiv.appendChild(font)
this.promises.push(new Promise((resolve, reject) => {
FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
}))
})
var fontDetectDiv = document.getElementById("fontdetectHelper")
fontDetectDiv.parentNode.removeChild(fontDetectDiv)
assets.img.forEach(name => {
var id = this.getFilename(name)
assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL)
assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR)
var image = document.createElement("img")
this.promises.push(pageEvents.load(image))
image.id = name
image.src = "/assets/img/" + name
this.assetsDiv.appendChild(image)
assets.image[id] = image
})
assets.audioSfx.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain))
})
assets.audioMusic.forEach(name => {
this.promises.push(this.loadSound(name, snd.musicGain))
})
assets.audioSfxLR.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => {
var id = this.getFilename(name)
assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL)
assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR)
}))
})
assets.audioSfxLoud.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxLoudGain))
})
p2 = new P2Connection()
this.promises.push(this.ajax("/api/songs").then(songs => {
assets.songs = JSON.parse(songs)
}))
assets.views.forEach(name => {
var id = this.getFilename(name)
this.promises.push(this.ajax("src/views/" + name).then(page => {
assets.pages[id] = page
}))
})
this.promises.forEach(promise => {
promise.then(this.assetLoaded.bind(this))
})
Promise.all(this.promises).then(() => {
this.clean()
this.callback()
}, this.errorMsg.bind(this))
})
assets.audioSfxLoud.forEach(name => {
this.promises.push(this.loadSound(name, snd.sfxLoudGain))
})
p2 = new P2Connection()
this.promises.push(this.ajax("/api/songs").then(songs => {
assets.songs = JSON.parse(songs)
}))
assets.views.forEach(name => {
var id = this.getFilename(name)
this.promises.push(this.ajax("src/views/" + name).then(page => {
assets.pages[id] = page
}))
})
this.promises.forEach(promise => {
promise.then(this.assetLoaded.bind(this))
})
Promise.all(this.promises).then(() => {
this.clean()
this.callback()
}, this.errorMsg.bind(this))
}
loadSound(name, gain){
if(this.oggNotSupported && name.endsWith(".ogg")){
name = name.slice(0, -4) + ".wav"
}
var id = this.getFilename(name)
return gain.load("/assets/audio/" + name).then(sound => {
assets.sounds[id] = sound

21
public/src/js/view.js
View File

@ -498,7 +498,7 @@ class View{
}
}else if(!circle.isAnimated()){
// Start animation to HP bar
circle.animate()
circle.animate(ms)
}
if(ms >= circle.ms && !circle.gogoChecked){
if(this.gogoTime != circle.gogoTime){
@ -507,10 +507,12 @@ class View{
circle.gogoChecked = true
}
if(circle.isAnimated()){
var animationDuration = 470
if(ms <= finishTime + animationDuration){
var curveDistance = this.HPBarX + this.HPBarW - this.slotX
var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
var animT = circle.getAnimT()
var animationDuration = 400
if(ms <= animT + animationDuration){
var curveDistance = this.HPBarX + this.HPBarW - this.slotX - this.HPBarColH / 2
var animPoint = (ms - animT) / animationDuration
var bezierPoint = this.calcBezierPoint(this.easeOut(animPoint), [{
x: this.slotX + this.circleSize * 0.4,
y: this.circleY - this.circleSize * 0.8
}, {
@ -521,13 +523,9 @@ class View{
y: 0
}, {
x: this.slotX + curveDistance,
y: this.HPbarColY
y: this.HPbarColY + this.HPBarColH / 2
}])
this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
// Update animation frame
circle.incAnimT()
circle.incFrame()
}
else{
circle.endAnimation()
@ -548,6 +546,9 @@ class View{
}
return data[0]
}
easeOut(pos){
return Math.sin(Math.PI / 2 * pos)
}
drawCircle(circle, circlePos){
var z = this.canvas.scale
var fill, size, faceID