vue和js相关的问题

麦米尔加弗德 发表于 2022-10-18 21:32

想使用js调用接口获取当前麦克风声音。然后测出最大值，传给vue里面的一个ref对象，以便达到实时更改的效果。但是不太会，import什么的试过了，没有达到相应的效果
所以想问问应该怎么弄呢？目前的想法是弄一个通信，将js中的值实时传到vue中

还请指正，这是有关js代码，可以在网页中实现的，如何把maxVal实时传到vue里面呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>音量</title>
<style>

</style>
</head>
<body>
<div id="status">预备开始</div>

<script type="text/javascript">
var mystatus = document.getElementById("status");
debugger
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (!navigator.getUserMedia) {
   mystatus.innerHTML = "您的浏览器不支持获取音频。"
}
navigator.getUserMedia({ audio: true }, onSuccess, onError); //调用麦克风捕捉音频信息，成功时触发onSuccess函数，失败时触发onError函数
function onError() {
   mystatus.innerHTML = "获取音频时好像出了点问题。"
}
function onSuccess(stream) {

   //创建一个音频环境对像
   audioContext = window.AudioContext || window.webkitAudioContext;
   context = new audioContext();

   //将声音输入这个对像
   audioInput = context.createMediaStreamSource(stream);

   //设置音量节点
   volume = context.createGain();
   audioInput.connect(volume);

   //创建缓存，用来缓存声音
   var bufferSize = 2048;

   // 创建声音的缓存节点，createJavaScriptNode方法的
   // 第二个和第三个参数指的是输入和输出都是双声道。
   recorder = context.createScriptProcessor(bufferSize, 1, 1);

   // 录音过程的回调函数，基本上是将左右两声道的声音
   // 分别放入缓存。
   recorder.onaudioprocess = function (e) {
         var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
         //创建变量并迭代来获取最大的音量值
         var maxVal = 0;
         for (var i = 0; i < buffer.length; i++) {
            if (maxVal < buffer) {
               maxVal = buffer;


            }
         }
         //显示音量值
         mystatus.innerHTML = "您的音量值：" + Math.round(maxVal * 100);
         if (maxVal*5 > .5) {
            //当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
            mystatus.innerHTML = "您的声音太响了!!";
console.log(maxVal);
            // liveSource.disconnect(levelChecker);
         }
   }

   // 将音量节点连上缓存节点，换言之，音量节点是输入
   // 和输出的中间环节。
   volume.connect(recorder);

   // 将缓存节点连上输出的目的地，可以是扩音器，也可以
   // 是音频文件。
   recorder.connect(context.destination);


}
</script>
</body>
</html>

枫止觞 发表于 2022-10-18 21:40

大佬研究的东西实在看不懂

坏人。丶 发表于 2022-10-18 21:44

这个界面就没发现什么vue呀，你要不要试试存起来，vue那边定时器去取

PhantomShuttle 发表于 2022-10-18 22:43

是这个意思吗在vue外面改里面的值？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<title>音量</title>
<style>

</style>
</head>
<body>
<div id="status">预备开始</div>
<div id = "app">
<p style = "font-size:25px;">音量: {{ volume }}</p>
</div>

<script type="text/javascript">

var vm = new Vue({
el: '#app',
data: {
   volume: 1
},

});
vm.$watch('volume', function(nval, oval) {
//alert('值的变化 :' + oval + ' 变为 ' + nval + '!');
});

var mystatus = document.getElementById("status");
debugger
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (!navigator.getUserMedia) {
   mystatus.innerHTML = "您的浏览器不支持获取音频。"
}
navigator.getUserMedia({ audio: true }, onSuccess, onError); //调用麦克风捕捉音频信息，成功时触发onSuccess函数，失败时触发onError函数
function onError() {
   mystatus.innerHTML = "获取音频时好像出了点问题。"
}
function onSuccess(stream) {

   //创建一个音频环境对像
   audioContext = window.AudioContext || window.webkitAudioContext;
   context = new audioContext();

   //将声音输入这个对像
   audioInput = context.createMediaStreamSource(stream);

   //设置音量节点
   volume = context.createGain();
   audioInput.connect(volume);

   //创建缓存，用来缓存声音
   var bufferSize = 2048;

   // 创建声音的缓存节点，createJavaScriptNode方法的
   // 第二个和第三个参数指的是输入和输出都是双声道。
   recorder = context.createScriptProcessor(bufferSize, 1, 1);

   // 录音过程的回调函数，基本上是将左右两声道的声音
   // 分别放入缓存。
   recorder.onaudioprocess = function (e) {
         var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
         //创建变量并迭代来获取最大的音量值
         var maxVal = 0;
         for (var i = 0; i < buffer.length; i++) {
            if (maxVal < buffer) {
               maxVal = buffer;


            }
         }
         //显示音量值
         mystatus.innerHTML = "您的音量值：" + Math.round(maxVal * 100);
         vm.volume=Math.round(maxVal * 100);

         if (maxVal*5 > .5) {
            //当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
            mystatus.innerHTML = "您的声音太响了!!";
   console.log(maxVal);
            // liveSource.disconnect(levelChecker);
         }
   }

   // 将音量节点连上缓存节点，换言之，音量节点是输入
   // 和输出的中间环节。
   volume.connect(recorder);

   // 将缓存节点连上输出的目的地，可以是扩音器，也可以
   // 是音频文件。
   recorder.connect(context.destination);


}
</script>

</body>
</html>

麦米尔加弗德 发表于 2022-10-18 23:02

PhantomShuttle 发表于 2022-10-18 22:43
是这个意思吗在vue外面改里面的值？

是把js里面一个持续变动的变量传到vue里面去，让vue可以调用

麦米尔加弗德 发表于 2022-10-18 23:03

经过测试，用了本办法，windwos.postmessage可以，但是我感觉这种方法不太好........还有其他的方法吗？让代码看起来更好一些的

永恒陌 发表于 2022-10-19 08:16

虽然看不大懂再干什么。但是我用过一个录音库你可以看一下https://github.com/xiangyuecn/Recorder

永恒陌 发表于 2022-10-19 08:20

我觉得你可以反过来先让vue把那个变量管理起来

data() {
return {
maxVal: 0
}
}
然后再在created里把这个变量暴露出去
created() {
window.maxVal = this.maxVal;
}
然后这不就让vue把这个变量管理起来了，就可以在任意地方修改它，然后vue也会有相应的数据同步了

d199212 发表于 2022-10-19 08:32

得先获取vue实例，才能赋值或者修改吧，所以先把vue实例暴露出来

d199212 发表于 2022-10-19 08:33

d199212 发表于 2022-10-19 08:32
得先获取vue实例，才能赋值或者修改吧，所以先把vue实例暴露出来

或者你存cookie或者session，然后vue里面用计时器去实时监听

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

vue和js相关的问题