test-voice-pitch
把一个测量人声音高网站的部分功能移植到vue组件。
源网站:https://bideyuanli.com/pp 作者:比的原理。感谢比的原理大佬。
线上demo:https://festive-hoover-d6537d.netlify.app
安装
npm i test-voice-pitch (yarn也可)
使用示例
<template> <div id="app"> <TestVoicePitch voice-type="woman_low" @onVoiceIn="getData" @beforeStop="beforeStop" ref="test"></TestVoicePitch> <p>您传入的声音为:{{pitch.inter||'未检测到声音'}}</p> <p>系统判断您的声音为:{{pitch.woman_voice||'未检测到声音'}}</p> <p>系统觉得您的声音:{{pureName}}</p> <button @click="start">start</button> <button @click="stop">stop</button> </div></template> <script>import test_voice_pitch from 'test-voice-pitch'export default { name: 'App', data(){ return{ pitch:{}, pureName:'' } }, components:{ "TestVoicePitch":test_voice_pitch.component }, methods:{ start(){ this.$refs['test'].start(); }, stop(){ this.$refs['test'].stop(); }, getData(data){ this.pitch = data.pitch; this.pureName = data.pureName; }, beforeStop(data){ console.log(data) } }}</script> <style> </style>
props
名称 | 作用 | 可用值 |
---|---|---|
voice-type | 指定麦克风录入的人声类型,提供给算法进行计算,默认值为‘man_high’(男高音) | 'man_high','man_low','woman_high','woman_low' |
callbacks
名称 | 作用 | 回调参数 |
---|---|---|
onVoiceIn | 麦克风开启时,实时回显声音的测量数据 | data:{pitch:Object,pureName:String} |
beforeStop | 获取麦克风关闭前的一帧声音数据 | data:{pitch:Object,pureName:String} |
说明
1.声音数据回显格式说明
/*当没有声音被录入时,pitch的值为{}*/pitch: "inter": "Db6"//测定的音名 "man": "^c''"//当音源为男声时测定的唱名(abcjs的表示法) "woman": "^c'"//当音源为女声时测定的唱名(abcjs的表示法) 'man_voice': '#c4'//当音源为男声时测定的唱名 'woman_voice': '#c3'//当音源为女声时测定的唱名 "value": 110873 //音源频率 /*当没有声音被录入时,pureName的值为''*//*pureName可能返回的所有结果如下*/pureName|1:'真声''混声''假声''假出翔''头声'
2.组件使用时必须指定ref
因为浏览器对媒体的安全限制,你需要在使用的页面中自定义录音的开始与关闭的方法。(具体见使用示例)
踩坑提示
1.部署到线上时,不可使用http协议地址。进行本地测试时,不可使用localhost,同时浏览器会禁止调用麦克风,可以通过如下方式绕过:https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339
2.移植比较粗糙(基本是源码照搬,因为没看懂orz),不喜轻喷。如果觉得声音测量算法不准确,请联系比的原理大佬交流。
3.源码使用了低版本的p5.js框架,目前p5的最新版本有bug无法调用( https://github.com/processing/p5.js-sound/issues/512 ),因此p5的依赖暂时采用低版本。