极客观点
项目管理
HarmonyOS
我在本地127.0.0.1环境下测试没有问题，一传到网站服务器就出问题了。关键代码如下：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
body{
overflow: hidden;
}
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="js/AudioAPI.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/Role.js"></script>
<script src="js/Game.js"></script>
<script src="js/Map.js"></script>
<script type="text/javascript">
var game = new Game({
"canvasid" : "#mycanvas",
"Rjsonurl" : "R.json"
});
</script>
</body>
</html>AudioAPI.js
const navigator = window.navigator
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
const AudioContext = window.AudioContext ||
window.webkitAudioContext
const isSupport = !!(navigator.getUserMedia && AudioContext)
const context = isSupport && new AudioContext()
var AudioApi = window.AudioApi = function(){
}
function start(){
// https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext AudioContent API
return new Promise((resolve, reject) => {
navigator.getUserMedia({audio: true}, stream => { // 申请浏览器麦克风权限
const source = context.createMediaStreamSource(stream)
// 该对象可以获得声音的频率数据 https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext/createAnalyser
const analyser = context.createAnalyser()
source.connect(analyser)
analyser.fftSize = 2048
resolve(analyser)
}, () => {
reject()
})
})
}
function getVoiceSize(analyser){
const dataArray = new Uint8Array(analyser.frequencyBinCount)
// 这里会获得一个数组，数字的下标表示频率，数组的值表示频率波大小
// 通过对这些值的一个简单累加，就可以得到一个数字，用于游戏中表示声音的大小
analyser.getByteFrequencyData(dataArray)
const data = dataArray.slice(100, 1000) // 只获得 100 - 1000Hz 的声音频率大小
const sum = data.reduce((a, b) => a + b) // 将这些值累加
return sum
}game.js中调用了start方法,关键代码是:
start().then(function(analyser){
var timer = setInterval(function(){
var voiceSize = getVoiceSize(analyser)
console.log(voiceSize);
}, 40)
})