vue和js相关的问题

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

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

还请指正，这是有关js代码，可以在网页中实现的，如何把maxVal实时传到vue里面呢？

[HTML] 纯文本查看 复制代码

<!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[i]) {
                    maxVal = buffer[i];
		    

                }
            }
            //显示音量值
            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外面改里面的值？

[HTML] 纯文本查看 复制代码

<!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[i]) {
                    maxVal = buffer[i];
             
 
                }
            }
            //显示音量值
            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外面改里面的值？
[mw_shl_code=html,true]

是把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把那个变量管理起来

[JavaScript] 纯文本查看 复制代码

  data() {
    return {
      maxVal: 0
    }
  }

然后再在created里把这个变量暴露出去

[Asm] 纯文本查看 复制代码

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里面用计时器去实时监听

帐号		自动登录	找回密码
密码			注册[Register]

[求助] vue和js相关的问题