-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
830185a
commit 8652ecf
Showing
1 changed file
with
124 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,157 +1,152 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-us"> | ||
| <head> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <title>Unity WebGL Player | CLAP!</title> | ||
| <link rel="shortcut icon" href="TemplateData/favicon.ico"> | ||
| <link rel="stylesheet" href="TemplateData/style.css"> | ||
| </head> | ||
| <body> | ||
| </head> | ||
| <body> | ||
| <div id="unity-container" class="unity-desktop"> | ||
| <canvas id="unity-canvas" width=350 height=800 tabindex="-1"></canvas> | ||
| <div id="unity-loading-bar"> | ||
| <div id="unity-logo"></div> | ||
| <div id="unity-progress-bar-empty"> | ||
| <div id="unity-progress-bar-full"></div> | ||
| <canvas id="unity-canvas" width=350 height=800 tabindex="-1"></canvas> | ||
| <div id="unity-loading-bar"> | ||
| <div id="unity-logo"></div> | ||
| <div id="unity-progress-bar-empty"> | ||
| <div id="unity-progress-bar-full"></div> | ||
| </div> | ||
| </div> | ||
| <div id="unity-warning"></div> | ||
| <div id="unity-footer"> | ||
| <div id="unity-webgl-logo"></div> | ||
| <div id="unity-fullscreen-button"></div> | ||
| <div id="unity-build-title">CLAP!</div> | ||
| </div> | ||
| </div> | ||
| <div id="unity-warning"> </div> | ||
| <div id="unity-footer"> | ||
| <div id="unity-webgl-logo"></div> | ||
| <div id="unity-fullscreen-button"></div> | ||
| <div id="unity-build-title">CLAP!</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| var container = document.querySelector("#unity-container"); | ||
| var canvas = document.querySelector("#unity-canvas"); | ||
| var loadingBar = document.querySelector("#unity-loading-bar"); | ||
| var progressBarFull = document.querySelector("#unity-progress-bar-full"); | ||
| var fullscreenButton = document.querySelector("#unity-fullscreen-button"); | ||
| var warningBanner = document.querySelector("#unity-warning"); | ||
|
|
||
| var audioStream = null; | ||
| var audioContext = null; | ||
| var analyser = null; | ||
| var analyzeAudioId = null; | ||
| var container = document.querySelector("#unity-container"); | ||
| var canvas = document.querySelector("#unity-canvas"); | ||
| var loadingBar = document.querySelector("#unity-loading-bar"); | ||
| var progressBarFull = document.querySelector("#unity-progress-bar-full"); | ||
| var fullscreenButton = document.querySelector("#unity-fullscreen-button"); | ||
| var warningBanner = document.querySelector("#unity-warning"); | ||
|
|
||
| function unityShowBanner(msg, type) { | ||
| function updateBannerVisibility() { | ||
| warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; | ||
| } | ||
| var div = document.createElement('div'); | ||
| div.innerHTML = msg; | ||
| warningBanner.appendChild(div); | ||
| if (type == 'error') div.style = 'background: red; padding: 10px;'; | ||
| else { | ||
| if (type == 'warning') div.style = 'background: yellow; padding: 10px;'; | ||
| setTimeout(function() { | ||
| warningBanner.removeChild(div); | ||
| function unityShowBanner(msg, type) { | ||
| function updateBannerVisibility() { | ||
| warningBanner.style.display = warningBanner.children.length ? 'block' : 'none'; | ||
| } | ||
| var div = document.createElement('div'); | ||
| div.innerHTML = msg; | ||
| warningBanner.appendChild(div); | ||
| if (type === 'error') div.style = 'background: red; padding: 10px;'; | ||
| else { | ||
| if (type === 'warning') div.style = 'background: yellow; padding: 10px;'; | ||
| setTimeout(function() { | ||
| warningBanner.removeChild(div); | ||
| updateBannerVisibility(); | ||
| }, 5000); | ||
| } | ||
| updateBannerVisibility(); | ||
| }, 5000); | ||
| } | ||
| updateBannerVisibility(); | ||
| } | ||
|
|
||
| var buildUrl = "Build"; | ||
| var loaderUrl = buildUrl + "/clapwebbuild.loader.js"; | ||
| var config = { | ||
| dataUrl: buildUrl + "/clapwebbuild.data", | ||
| frameworkUrl: buildUrl + "/clapwebbuild.framework.js", | ||
| codeUrl: buildUrl + "/clapwebbuild.wasm", | ||
| streamingAssetsUrl: "StreamingAssets", | ||
| companyName: "CoFo", | ||
| productName: "CLAP!", | ||
| productVersion: "1.1.1", | ||
| showBanner: unityShowBanner, | ||
| }; | ||
| var buildUrl = "Build"; | ||
| var loaderUrl = buildUrl + "/clapwebbuild.loader.js"; | ||
| var config = { | ||
| dataUrl: buildUrl + "/clapwebbuild.data", | ||
| frameworkUrl: buildUrl + "/clapwebbuild.framework.js", | ||
| codeUrl: buildUrl + "/clapwebbuild.wasm", | ||
| streamingAssetsUrl: "StreamingAssets", | ||
| companyName: "CoFo", | ||
| productName: "CLAP!", | ||
| productVersion: "1.1.1", | ||
| showBanner: unityShowBanner, | ||
| }; | ||
|
|
||
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | ||
| var meta = document.createElement('meta'); | ||
| meta.name = 'viewport'; | ||
| meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; | ||
| document.getElementsByTagName('head')[0].appendChild(meta); | ||
| container.className = "unity-mobile"; | ||
| canvas.className = "unity-mobile"; | ||
| } else { | ||
| canvas.style.width = "350px"; | ||
| canvas.style.height = "800px"; | ||
| } | ||
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { | ||
| var meta = document.createElement('meta'); | ||
| meta.name = 'viewport'; | ||
| meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'; | ||
| document.getElementsByTagName('head')[0].appendChild(meta); | ||
| container.className = "unity-mobile"; | ||
| canvas.className = "unity-mobile"; | ||
| } else { | ||
| canvas.style.width = "350px"; | ||
| canvas.style.height = "800px"; | ||
| } | ||
|
|
||
| loadingBar.style.display = "block"; | ||
| loadingBar.style.display = "block"; | ||
|
|
||
| var script = document.createElement("script"); | ||
| script.src = loaderUrl; | ||
| script.onload = () => { | ||
| createUnityInstance(canvas, config, (progress) => { | ||
| progressBarFull.style.width = 100 * progress + "%"; | ||
| }).then((unityInstance) => { | ||
| loadingBar.style.display = "none"; | ||
| fullscreenButton.onclick = () => { | ||
| unityInstance.SetFullscreen(1); | ||
| }; | ||
| window.unityInstance = unityInstance; | ||
| }).catch((message) => { | ||
| alert(message); | ||
| }); | ||
| }; | ||
| var script = document.createElement("script"); | ||
| script.src = loaderUrl; | ||
| script.onload = () => { | ||
| createUnityInstance(canvas, config, (progress) => { | ||
| progressBarFull.style.width = 100 * progress + "%"; | ||
| }).then((unityInstance) => { | ||
| loadingBar.style.display = "none"; | ||
| fullscreenButton.onclick = () => { | ||
| unityInstance.SetFullscreen(1); | ||
| }; | ||
|
|
||
| document.body.appendChild(script); | ||
| // Обработка команд от Unity для включения/выключения микрофона | ||
| window.controlMicrophone = function (action) { | ||
| if (action === "start") { | ||
| startMicrophone(); | ||
| } else if (action === "stop") { | ||
| stopMicrophone(); | ||
| } | ||
| }; | ||
|
|
||
| // Функции для активации и деактивации микрофона | ||
| function startMicrophone() { | ||
| if (audioStream) return; | ||
| // Функции для работы с микрофоном | ||
| let audioContext; | ||
| let microphone; | ||
| let analyser; | ||
| let dataArray; | ||
|
|
||
| function startMicrophone() { | ||
| if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { | ||
| console.error("Микрофон не поддерживается."); | ||
| return; | ||
| } | ||
|
|
||
| navigator.mediaDevices.getUserMedia({ audio: true }) | ||
| .then((stream) => { | ||
| audioStream = stream; | ||
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | ||
| const mediaStreamSource = audioContext.createMediaStreamSource(stream); | ||
| analyser = audioContext.createAnalyser(); | ||
| analyser.fftSize = 256; | ||
| mediaStreamSource.connect(analyser); | ||
| const dataArray = new Uint8Array(analyser.frequencyBinCount); | ||
| navigator.mediaDevices.getUserMedia({ audio: true }) | ||
| .then(stream => { | ||
| audioContext = new (window.AudioContext || window.webkitAudioContext)(); | ||
| microphone = audioContext.createMediaStreamSource(stream); | ||
| analyser = audioContext.createAnalyser(); | ||
| analyser.fftSize = 256; | ||
| dataArray = new Uint8Array(analyser.frequencyBinCount); | ||
| microphone.connect(analyser); | ||
| processAudio(); | ||
| }) | ||
| .catch(error => { | ||
| console.error("Ошибка доступа к микрофону:", error); | ||
| }); | ||
| } | ||
|
|
||
| function analyzeAudio() { | ||
| analyser.getByteFrequencyData(dataArray); | ||
| const volume = dataArray.reduce((sum, value) => sum + value, 0) / dataArray.length; | ||
| unityInstance.SendMessage('MicrophoneManager', 'ProcessMicrophoneInput', volume); | ||
| analyzeAudioId = requestAnimationFrame(analyzeAudio); | ||
| } | ||
| function stopMicrophone() { | ||
| if (audioContext && audioContext.state !== 'closed') { | ||
| audioContext.close(); | ||
| console.log("Микрофон остановлен."); | ||
| } | ||
| } | ||
|
|
||
| analyzeAudio(); | ||
| }) | ||
| .catch((err) => { | ||
| console.error('Ошибка доступа к микрофону:', err); | ||
| }); | ||
| } | ||
| function processAudio() { | ||
| if (!audioContext || audioContext.state === 'closed') return; | ||
|
|
||
| function stopMicrophone() { | ||
| if (audioStream) { | ||
| audioStream.getTracks().forEach(track => track.stop()); | ||
| audioStream = null; | ||
| if (analyzeAudioId) { | ||
| cancelAnimationFrame(analyzeAudioId); | ||
| analyzeAudioId = null; | ||
| } | ||
| if (audioContext) { | ||
| audioContext.close(); | ||
| audioContext = null; | ||
| } | ||
| console.log("Микрофон остановлен."); | ||
| } | ||
| } | ||
| analyser.getByteFrequencyData(dataArray); | ||
| let volume = dataArray.reduce((a, b) => a + b, 0) / dataArray.length / 255; | ||
|
|
||
| // Функция для контроля микрофона от Unity | ||
| function controlMicrophone(command) { | ||
| if (command === 'start') { | ||
| startMicrophone(); | ||
| } else if (command === 'stop') { | ||
| stopMicrophone(); | ||
| } | ||
| } | ||
| // Отправляем громкость в Unity | ||
| unityInstance.SendMessage('ClapDetector', 'ProcessMicrophoneInput', volume); | ||
|
|
||
| requestAnimationFrame(processAudio); | ||
| } | ||
| }).catch((message) => { | ||
| alert(message); | ||
| }); | ||
| }; | ||
| document.body.appendChild(script); | ||
| </script> | ||
| </body> | ||
| </body> | ||
| </html> |