{"id":438,"date":"2025-10-20T14:27:58","date_gmt":"2025-10-20T05:27:58","guid":{"rendered":"https:\/\/nichimofoods.com\/en\/?page_id=438"},"modified":"2025-10-22T13:07:07","modified_gmt":"2025-10-22T04:07:07","slug":"super-kikurage-piano","status":"publish","type":"page","link":"https:\/\/nichimofoods.com\/en\/super-kikurage-piano\/","title":{"rendered":"Super Kikurage Piano"},"content":{"rendered":"<div class=\"mr-bean-piano\">\r\n\r\n<!-- Top half: YouTube video -->\r\n<div class=\"video-wrapper\">\r\n  <iframe \r\n    id=\"ytPlayer\"\r\n    src=\"https:\/\/www.youtube.com\/embed\/z0ZY0whadOA?rel=0&#038;modestbranding=1&#038;enablejsapi=1\"\r\n    frameborder=\"0\" \r\n    allow=\"autoplay; encrypted-media\" \r\n    allowfullscreen>\r\n  <\/iframe>\r\n<\/div>\r\n\r\n<!-- Bottom half: Piano -->\r\n<div class=\"piano-wrap\">\r\n  <h5>Super Kikurage Piano<\/h5>\r\n  <div class=\"controls\">\r\n    <label>Vol <input id=\"volume\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.22\"><\/label>\r\n    <button id=\"oct-down\" class=\"btn\">Oct &#8211;<\/button>\r\n    <button id=\"oct-up\" class=\"btn\">Oct +<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"keyboard\" id=\"keyboard\" tabindex=\"-1\">\r\n    <div class=\"keys\" id=\"keys\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"footer\">\r\n    <strong>&#x2328; z s x d c v g b h n j m ,<\/strong>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n(function(){\r\n  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n  const masterGain = audioCtx.createGain(); masterGain.gain.value = 0.22; masterGain.connect(audioCtx.destination);\r\n\r\n  const NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];\r\n  function freq(noteIndex, octave){\r\n    const a4 = 440;\r\n    const semisFromA4 = (octave - 4) * 12 + noteIndex - 9;\r\n    return a4 * Math.pow(2, semisFromA4\/12);\r\n  }\r\n\r\n  wrong = 0;\r\n  gameover = 3;\r\n\r\n  let baseOctave = 4;\r\n  const keyMap = {'z':0,'s':1,'x':2,'d':3,'c':4,'v':5,'g':6,'b':7,'h':8,'n':9,'j':10,'m':11,',':12};\r\n\r\n  const keysContainer = document.getElementById('keys');\r\n\r\n  function buildKeys(){\r\n    keysContainer.innerHTML = '';\r\n    const whiteNotes = ['C','D','E','F','G','A','B'];\r\n    const whiteIndexes = [0,2,4,5,7,9,11];\r\n    const blackPositions = {0:'C#',1:'D#',3:'F#',4:'G#',5:'A#'};\r\n\r\n    let cSharpKeyEl = null;\r\n\r\n    whiteNotes.forEach((note,i)=>{\r\n      const w = document.createElement('div');\r\n      w.className = 'key';\r\n      w.dataset.note = note;\r\n      w.dataset.index = whiteIndexes[i];\r\n      w.dataset.octave = baseOctave;\r\n      w.innerHTML = `<div class=\"label\">${note}<\/div>`;\r\n      if (note === 'F') {\r\n            w.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/jstyle.png')\";\r\n            w.style.backgroundRepeat = 'no-repeat';\r\n            w.style.backgroundPosition = 'center bottom';\r\n            w.style.backgroundSize = '30px 76px';\r\n            w.style.color = \"#fff\";\r\n      } else if (note === 'A') {\r\n            w.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/pstyle.png')\";\r\n            w.style.backgroundRepeat = 'no-repeat';\r\n            w.style.backgroundPosition = 'center bottom';\r\n            w.style.backgroundSize = '30px 76px';\r\n            w.style.color = \"#fff\";\r\n      } else if (note === 'B') {\r\n            w.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/umbrella.png')\";\r\n            w.style.backgroundRepeat = 'no-repeat';\r\n            w.style.backgroundPosition = 'center bottom';\r\n            w.style.backgroundSize = '30px 76px';\r\n      }\r\n      keysContainer.appendChild(w);\r\n      \r\n      if(blackPositions[i]!==undefined){\r\n        const b = document.createElement('div');\r\n        b.className = 'black';\r\n        b.dataset.note = blackPositions[i];\r\n        b.dataset.index = NOTES.indexOf(blackPositions[i]);\r\n        b.dataset.octave = baseOctave;\r\n        b.innerHTML = `<div class=\"label\">${blackPositions[i]}<\/div>`;\r\n        if (blackPositions[i] === 'C#') {\r\n            b.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/kikuzo.gif')\";\r\n            b.style.backgroundRepeat = 'no-repeat';\r\n            b.style.backgroundPosition = 'center';\r\n            b.style.backgroundSize = '30px 76px'; \/\/ Adjust size as needed\r\n        } else if (blackPositions[i] === 'A#') {\r\n            b.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/kstyle.png')\";\r\n            b.style.backgroundRepeat = 'no-repeat';\r\n            b.style.backgroundPosition = 'center';\r\n            b.style.backgroundSize = '30px 76px'; \/\/ Adjust size as needed\r\n        } else if (blackPositions[i] === 'F#') {\r\n            b.style.backgroundImage = \"url('https:\/\/nichimofoods.com\/en\/wp-content\/uploads\/2025\/10\/tomanese.png')\";\r\n            b.style.backgroundRepeat = 'no-repeat';\r\n            b.style.backgroundPosition = 'center';\r\n            b.style.backgroundSize = '30px 76px'; \/\/ Adjust size as needed\r\n            b.style.borderRadius = '10px';\r\n        }\r\n        keysContainer.appendChild(b);\r\n\r\n        function updateBlackPosition(){\r\n          b.style.left = `${w.offsetLeft + w.offsetWidth - b.offsetWidth\/2}px`;\r\n        }\r\n        requestAnimationFrame(updateBlackPosition);\r\n        window.addEventListener('resize', updateBlackPosition);\r\n\r\n        if (blackPositions[i] === ['C#','D#','F#','G#','A#'][Math.floor(new Date().getMilliseconds()\/200)])  {\r\n          \/\/b.style.setProperty('--main-color', 'hotpink'); \/\/ you can compute color dynamically\r\n          b.style.setProperty('--main-color', ['#ff4d4d','#4dff4d','#4d4dff','#ffb84d','#b84dff'][Math.floor(new Date().getMilliseconds()\/200) % 5]);\r\n          b.classList.add('csharp-glow');\r\n          cSharpKeyEl = b;\r\n        }\r\n      }\r\n    });\r\n\r\n    bindKeys();\r\n  }\r\n\r\n  const active = new Map();\r\n\r\nfunction play(noteIndex, octave){\r\n  const osc = audioCtx.createOscillator();\r\n  const gain = audioCtx.createGain();\r\n\r\n  osc.type = 'triangle'; \/\/ more piano-like than sine\r\n  osc.frequency.value = freq(noteIndex, octave);\r\n\r\n  osc.connect(gain);\r\n  gain.connect(masterGain);\r\n\r\n  const now = audioCtx.currentTime;\r\n  \/\/ Attack-Decay-Sustain-Release (ADSR)\r\n  gain.gain.setValueAtTime(0.0001, now);\r\n  gain.gain.exponentialRampToValueAtTime(1, now + 0.02); \/\/ attack\r\n  gain.gain.exponentialRampToValueAtTime(0.3, now + 0.4); \/\/ decay\r\n  gain.gain.exponentialRampToValueAtTime(0.0001, now + 1.2); \/\/ release\r\n\r\n  osc.start(now);\r\n  osc.stop(now + 1.3);\r\n\r\n  return {osc,gain};\r\n}\r\n\r\n\r\n  function stop(voice){\r\n    const now = audioCtx.currentTime;\r\n    voice.gain.gain.cancelScheduledValues(now);\r\n    voice.gain.gain.setValueAtTime(voice.gain.gain.value, now);\r\n    const t = 0.18;\r\n    voice.gain.gain.exponentialRampToValueAtTime(0.0001, now + t);\r\n    voice.osc.stop(now + t + 0.02);\r\n  }\r\n\r\n  function bindKeys(){\r\n    const allKeys = keysContainer.querySelectorAll('.key, .black');\r\n    allKeys.forEach(el=>{\r\n      el.addEventListener('pointerdown', e=>{\r\n        e.preventDefault();\r\n        if(audioCtx.state!=='running') audioCtx.resume();\r\n        const idx = Number(el.dataset.index), oct = Number(el.dataset.octave);\r\n        const note = el.dataset.note;\r\n        const id = idx+':'+oct;\r\n        if(active.has(id)) return;\r\n        const v = play(idx,oct);\r\n        active.set(id,v);\r\n        el.classList.add('down');\r\n        if (note !== 'C#') {\r\n          wrong += 1;\r\n          showToast(\"\\u{1F92A}\".repeat(wrong), 300);\r\n        };\r\n        if(note === 'F#') {\r\n          if (wrong >= gameover) {\r\n            wrong = 0;\r\n            window.location.href = 'https:\/\/poke-m.com\/products\/468057';\r\n          }\r\n        } else if (note === 'A#') {\r\n          if (wrong >= gameover) {\r\n            wrong = 0;\r\n            window.location.href = 'https:\/\/nichimofoods.shop-pro.jp\/?pid=188674763';\r\n          }\r\n        } else if (note === 'F') {\r\n          if (wrong >= gameover) {\r\n            wrong = 0;\r\n            window.location.href = 'https:\/\/nichimofoods.shop-pro.jp\/?pid=188674601';\r\n          }\r\n        } else if (note === 'A') {\r\n          if (wrong >= gameover) {\r\n            wrong = 0;\r\n            window.location.href = 'https:\/\/nichimofoods.shop-pro.jp\/?pid=188674827';\r\n          }\r\n        } else if (note === 'B') {\r\n          if (wrong >= gameover) {\r\n            wrong = 0;\r\n            window.location.href = 'https:\/\/www.amazon.co.jp\/dp\/B0F28YVSF6';\r\n          }\r\n        }; \r\n      });\r\n\r\n      el.addEventListener('pointerup', ()=>{\r\n        const idx = Number(el.dataset.index), oct = Number(el.dataset.octave);\r\n        const id = idx+':'+oct;\r\n        const v = active.get(id);\r\n        if(v){ stop(v); active.delete(id); }\r\n        el.classList.remove('down');\r\n      });\r\n\r\n      \/\/ Handle pointer cancel (finger drag away or leave)\r\n      el.addEventListener('pointerleave', ()=>{\r\n        const idx = Number(el.dataset.index), oct = Number(el.dataset.octave);\r\n        const id = idx+':'+oct;\r\n        const v = active.get(id);\r\n        if(v){ stop(v); active.delete(id); }\r\n        el.classList.remove('down');\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ YouTube autoplay after first click\r\n  let ytStarted = false;\r\n  const keyboardEl = document.getElementById('keyboard');\r\n  const iframe = document.getElementById('ytPlayer');\r\n\r\n  \/\/ Keyboard mapping\r\n  document.addEventListener('keydown', e=>{\r\n    if(audioCtx.state!=='running') audioCtx.resume();\r\n    const key = e.key.toLowerCase();\r\n    if(!keyMap.hasOwnProperty(key)) return;\r\n    if(!ytStarted) {ytStarted = true; iframe.contentWindow.postMessage('{\"event\":\"command\",\"func\":\"playVideo\",\"args\":\"\"}', '*'); keyboardEl.focus();}\r\n    const idx = keyMap[key];\r\n    const oct = baseOctave;\r\n    const id = idx + ':' + oct;\r\n    if(active.has(id)) return;\r\n    const v = play(idx, oct);\r\n    active.set(id, v);\r\n    const el = keysContainer.querySelector(`[data-index='${idx}'][data-octave='${oct}']`);\r\n    if(el) el.classList.add('down');\r\n  });\r\n\r\n  document.addEventListener('keyup', e=>{\r\n    const key = e.key.toLowerCase();\r\n    if(!keyMap.hasOwnProperty(key)) return;\r\n    const idx = keyMap[key];\r\n    const oct = baseOctave;\r\n    const id = idx + ':' + oct;\r\n    const v = active.get(id);\r\n    if(v){ stop(v); active.delete(id); }\r\n    const el = keysContainer.querySelector(`[data-index='${idx}'][data-octave='${oct}']`);\r\n    if(el) el.classList.remove('down');\r\n  });\r\n\r\n  document.getElementById('volume').addEventListener('input', e=>{\r\n    masterGain.gain.value = +e.target.value;\r\n  });\r\n  document.getElementById('oct-down').addEventListener('click', ()=>{\r\n    baseOctave=Math.max(1,baseOctave-1); buildKeys();\r\n  });\r\n  document.getElementById('oct-up').addEventListener('click', ()=>{\r\n    baseOctave=Math.min(7,baseOctave+1); buildKeys();\r\n  });\r\n\r\n  buildKeys();\r\n\r\n  document.addEventListener('click', () => {\r\n    if(ytStarted) return;\r\n    iframe.contentWindow.postMessage('{\"event\":\"command\",\"func\":\"playVideo\",\"args\":\"\"}', '*');\r\n    keyboardEl.focus();\r\n    ytStarted = true;\r\n  });\r\n\r\n})();\r\n<\/script>","protected":false},"excerpt":{"rendered":"Super Kikurage Piano Vol Oct &#8211; Oct + &#x2328; z s x d c v g b h n j m ,","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/pages\/438"}],"collection":[{"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":0,"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/pages\/438\/revisions"}],"wp:attachment":[{"href":"https:\/\/nichimofoods.com\/en\/wp-json\/wp\/v2\/media?parent=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}