\u3010\u3082\u306e\u30d3\u30fc\u30c8\u3011<\/title>\n\n <style>\n\n body { \n\n font-family: sans-serif; \n\n background-color: #FFFFFF; \n\n color: #000000; \n\n display: flex; \n\n justify-content: center; \n\n align-items: center;\n\n min-height: 100vh;\n\n margin: 0;\n\n }\n\n .container { \n\n width: 100%; \n\n max-width: 320px; \n\n padding: 20px; \n\n display: flex;\n\n flex-direction: column;\n\n align-items: center;\n\n }\n\n .slider-section { \n\n margin-bottom: 50px; \n\n width: 100%;\n\n display: flex;\n\n flex-direction: column;\n\n align-items: center;\n\n }\n\n .slider-label { \n\n font-size: 1.2rem; \n\n font-weight: bold; \n\n text-align: center; \n\n margin-bottom: 20px; \n\n letter-spacing: 4px;\n\n }\n\n input[type=\"range\"] { \n\n width: 100%; \n\n cursor: pointer; \n\n accent-color: #000000;\n\n }\n\n .play-btn { \n\n width: 100%; \n\n padding: 18px; \n\n font-size: 1.2rem; \n\n font-weight: bold; \n\n background-color: #000000; \n\n color: #FFFFFF; \n\n border: 2px solid #000000; \n\n border-radius: 0;\n\n cursor: pointer; \n\n transition: all 0.2s ease; \n\n letter-spacing: 4px;\n\n text-align: center;\n\n }\n\n .play-btn.playing { \n\n background-color: #FFFFFF; \n\n color: #000000; \n\n }\n\n <\/style>\n\n<\/head>\n\n<body>\n\n\n\n<div class=\"container\">\n\n <div class=\"slider-section\">\n\n <div class=\"slider-label\">\u30c6\u30f3\u30dd<\/div>\n\n <input type=\"range\" id=\"tempo-slider\" min=\"-50\" max=\"50\" value=\"0\" oninput=\"updateTempo()\">\n\n <\/div>\n\n\n\n <div class=\"slider-section\">\n\n <div class=\"slider-label\">\u30d4\u30c3\u30c1<\/div>\n\n <input type=\"range\" id=\"pitch-slider\" min=\"-50\" max=\"50\" value=\"0\" oninput=\"updatePitch()\">\n\n <\/div>\n\n\n\n <button id=\"main-btn\" class=\"play-btn\" onclick=\"togglePlay()\">\u518d\u751f<\/button>\n\n<\/div>\n\n\n\n<script>\n\n let isPlaying = false;\n\n let audioCtx, carrierOsc, modOsc, gainNode;\n\n\n\n \/\/ --- \u8a08\u7b97\u30ed\u30b8\u30c3\u30af ---\n\n \n\n function calculateTempoFreq(val) {\n\n return 5.0 + (val \/ 50) * 3.0;\n\n }\n\n\n\n function calculatePitchFreq(val) {\n\n return 150 * Math.pow(2, val \/ 25);\n\n }\n\n\n\n \/\/ --- \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u53cd\u6620 ---\n\n\n\n function updateTempo() {\n\n if (isPlaying && modOsc) {\n\n const val = parseInt(document.getElementById('tempo-slider').value, 10);\n\n const freq = calculateTempoFreq(val);\n\n modOsc.frequency.setTargetAtTime(freq, audioCtx.currentTime, 0.1);\n\n }\n\n }\n\n\n\n function updatePitch() {\n\n if (isPlaying && carrierOsc) {\n\n const val = parseInt(document.getElementById('pitch-slider').value, 10);\n\n const freq = calculatePitchFreq(val);\n\n carrierOsc.frequency.setTargetAtTime(freq, audioCtx.currentTime, 0.1);\n\n }\n\n }\n\n\n\n \/\/ --- \u30aa\u30fc\u30c7\u30a3\u30aa\u5236\u5fa1 ---\n\n\n\n function togglePlay() {\n\n if (isPlaying) {\n\n stopAudio();\n\n } else {\n\n const tempoVal = parseInt(document.getElementById('tempo-slider').value, 10);\n\n const pitchVal = parseInt(document.getElementById('pitch-slider').value, 10);\n\n playAudio(calculateTempoFreq(tempoVal), calculatePitchFreq(pitchVal));\n\n }\n\n }\n\n\n\n function playAudio(tempoFreq, pitchFreq) {\n\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n\n \n\n carrierOsc = audioCtx.createOscillator();\n\n carrierOsc.type = 'sine';\n\n carrierOsc.frequency.value = pitchFreq;\n\n\n\n gainNode = audioCtx.createGain();\n\n gainNode.gain.value = 1.0; \n\n\n\n modOsc = audioCtx.createOscillator();\n\n modOsc.type = 'sine';\n\n modOsc.frequency.value = tempoFreq;\n\n \n\n const modGain = audioCtx.createGain();\n\n modGain.gain.value = 0.4; \n\n\n\n modOsc.connect(modGain);\n\n modGain.connect(gainNode.gain);\n\n carrierOsc.connect(gainNode);\n\n gainNode.connect(audioCtx.destination);\n\n\n\n const now = audioCtx.currentTime;\n\n carrierOsc.start(now);\n\n modOsc.start(now);\n\n\n\n isPlaying = true;\n\n const btn = document.getElementById('main-btn');\n\n btn.innerText = \"\u505c\u6b62\";\n\n btn.classList.add('playing');\n\n }\n\n\n\n function stopAudio() {\n\n if (audioCtx) {\n\n audioCtx.close();\n\n audioCtx = null;\n\n carrierOsc = null;\n\n modOsc = null;\n\n }\n\n isPlaying = false;\n\n const btn = document.getElementById('main-btn');\n\n btn.innerText = \"\u518d\u751f\";\n\n btn.classList.remove('playing');\n\n }\n\n<\/script>\n\n\n\n<\/body>\n\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u3010\u3082\u306e\u30d3\u30fc\u30c8\u3011 \u30c6\u30f3\u30dd \u30d4\u30c3\u30c1 \u518d\u751f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-93","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ponnu.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":24,"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/ponnu.net\/index.php?rest_route=\/wp\/v2\/pages\/93\/revisions\/145"}],"wp:attachment":[{"href":"https:\/\/ponnu.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}