音频插件的用户界面设计

打开实时脚本

音频插件使您能够在实时流媒体音频的同时调优处理算法的参数。为了增强可用性，可以定义自定义用户界面(UI)，将参数映射到直观设计和定位的控件。你可以用audioPluginInterface，audioPluginParameter,audioPluginGridLayout来定义自定义UI。您可以在MATLAB®中使用自定义UI进行交互parameterTuner，或者将插件与自定义UI部署到数字音频工作站(DAW)。本教程通过依次增强一个基本的音频插件UI来介绍音频插件的关键设计功能。

要了解更多关于音频插件的信息，请参见音频插件在MATLAB．

默认用户界面

的equalizerV1音频插件使您能够调整三波段均衡器的增益和中心频率，调整整体音量，并在启用和禁用状态之间切换。

classdefequalizerV1 < audioPlugin属性GainLow = 0 FreqLow = sqrt(20*500) GainMid = 0 FreqMid = sqrt(500*3e3) GainHigh = 0 FreqHigh = sqrt(3e3*20e3) Volume = 1 Enable = true结束属性(常量)PluginInterface = audioPluginInterface(常量).．.audioPluginParameter (“GainLow”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20}),.．.audioPluginParameter (“FreqLow”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”20500}),.．.audioPluginParameter (“GainMid”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20}),.．.audioPluginParameter (“FreqMid”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”, 500年,3 e3}),.．.audioPluginParameter (“GainHigh”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20}),.．.audioPluginParameter (“FreqHigh”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”3 e3, 20 e3}),.．.audioPluginParameter (“体积”，.．.“映射”, {“林”0 2}).．.audioPluginParameter (“启用”）)结束属性(Access = private) mPEQ结束方法函数obj = equalizerV1 obj。mPEQ = multibandparametereq (“HasHighpassFilter”假的,.．.“HasLowShelfFilter”假的,“HasHighShelfFilter”假的,.．.“HasLowpassFilter”假的,“Oversample”假的,“NumEQBands”3,.．.“EQOrder”2);结束函数Y = process(obj, x)如果obj。Enable y = step(obj.mPEQ,x);y = y*obj.Volume;其他的Y = x;结束结束函数reset(obj) obj. mpeq . samplerate = getSampleRate(obj);重置(obj.mPEQ);结束函数set.FreqLow (obj, val) obj。FreqLow = val;obj.mPEQ.Frequencies(1) = val;% #好< * MCSUP >结束函数set.GainLow (obj, val) obj。GainLow = val;obj. mpeq . peak增益(1)= val;结束函数set.FreqMid (obj, val) obj。FreqMid = val;obj.mPEQ.Frequencies(2) = val;结束函数set.GainMid (obj, val) obj。GainMid = val;obj. mpeq . peak增益(2)= val;结束函数set.FreqHigh (obj, val) obj。FreqHigh = val;obj.mPEQ.Frequencies(3) = val;结束函数set.GainHigh (obj, val) obj。GainHigh = val;obj. mpeq . peak增益(3)= val;结束结束结束

调用parameterTuner来可视化音频插件的默认UI。

parameterTuner (equalizerV1)

控件样式和布局

要定义UI网格，请添加audioPluginGridLayout到audioPluginInterface．您可以在UI网格中指定单元格的数量、大小、间距和边框。在本例中，指定RowHeight作为(20、20160、20100)而且ColumnWidth作为(100100100、50150)．这将创建以下UI网格:

要定义UI控件样式，请更新audioPluginParameter的每个参数的定义中包含风格而且布局名称-值对。风格定义控制的类型(例如旋钮、滑块或开关)。布局定义控件在UI网格上占用哪些单元格。你可以指定布局如占据网格的[行，列]，或如[上，左;要占据的细胞群的右下方。默认情况下，控件显示名称也会显示出来，并在UI网格中占据它们自己的单元格。它们所占据的细胞取决于DisplayNameLocation名称-值对。

注释的箭头表示之间的差异equalizerV1而且equalzierV2．

classdefequalizerV2 < audioPlugin.．.为举例目的省略属性(常量)PluginInterface = audioPluginInterface(常量).．.audioPluginParameter (“GainLow”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.< %——“布局”, (2, 1; 4, 1],.．.< %——“DisplayName的”，“低”，“DisplayNameLocation”，“以上”)，.．.< %——audioPluginParameter (“FreqLow”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”20500},.．.“风格”，“rotaryknob”，.．.< %——“布局”(5、1),.．.< %——“DisplayNameLocation”，“没有”)，.．.< %——audioPluginParameter (“GainMid”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.< %——“布局”, (2, 2, 4, 2),.．.< %——“DisplayNameLocation”，“没有”)，.．.< %——audioPluginParameter (“FreqMid”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”、500、3 e3}.．.“风格”，“rotaryknob”，.．.< %——“布局”(5, 2),.．.< %——“DisplayNameLocation”，“没有”)，.．.< %——audioPluginParameter (“GainHigh”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.< %——“布局”,(2、3、4、3),.．.< %——“DisplayName的”，“高”，“DisplayNameLocation”，“以上”)，.．.< %——audioPluginParameter (“FreqHigh”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”3 e3, 20 e3},.．.“风格”，“rotaryknob”，.．.< %——“布局”, [3],.．.< %——“DisplayNameLocation”，“没有”)，.．.< %——audioPluginParameter (“体积”，.．.“映射”, {“林”0 2}.．.“风格”，“rotaryknob”，.．.< %——“布局”(3、5),.．.< %——“DisplayNameLocation”，“以上”)，.．.< %——audioPluginParameter (“启用”，.．.“风格”，“vtoggle”，.．.< %——“布局”, 5, 5],.．.< %——“DisplayNameLocation”，“没有”)，.．.< %——.．.audioPluginGridLayout (.．.< %——“RowHeight”(20、20160、20100),.．.< %——“ColumnWidth”(100100100、50150))< %——结束.．.为举例目的省略了。结束

的布局而且DisplayNameLocation定义于audioPluginParameterS将各自的参数映射到控制网格如下:

调用parameterTuner的UI可视化equalizerV2．

parameterTuner (equalizerV2)

背景图像和颜色

要自定义UI的背景，请指定分辨率的而且写成BackgroundColor在audioPluginInterface．

的写成BackgroundColor可以指定为短或长颜色名称字符串或RBG三元组。当你指定写成BackgroundColor，该颜色应用于UI上的所有空间，除了控件或控件占用的空间分辨率的．如果控件或背景图像包含透明度，则背景颜色通过透明度显示。

的分辨率的可指定为PNG、GIF或JPG文件。通过对齐UI网格和图像的左上角，将图像应用到UI网格。中定义的UI网格大小audioPluginGridLayout，然后将图像剪切到UI网格大小。背景图像没有调整大小。如果图像小于UI网格，那么UI网格的未占用区域将被视为透明的。

在本例中，您增加了网格周边的填充，以便为MathWorks®标志创建空间。您可以将UI网格的总宽度计算为所有列宽度加上左右填充加上列间距(的默认列间距)的和10像素在这个例子中使用): $（ One hundred. + One hundred. + One hundred. + 50 + 150 ） + （ 20. + 20. ） + （ 4 \times 10 ）＝ 580$ ．UI网格的总高度是所有行高加上顶部和底部填充加上行间距的和(在本例中使用默认的10像素行间距): $（ 20. + 20. + 160 + 20. + One hundred. ） + （ 20. + 120 ） + （ 4 \times 10 ）＝ 500 ．$ 要找到UI网格底部的logo，使用580 * 500的图像:

classdefequalizerV3 < audioPlugin.．.为举例目的省略了。属性(常量)PluginInterface = audioPluginInterface(常量).．.audioPluginParameter (“GainLow”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”, (2, 1; 4, 1],.．.“DisplayName的”，“低”，“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“FreqLow”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”20500},.．.“风格”，“rotaryknob”，.．.“布局”(5、1),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“GainMid”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”, (2, 2, 4, 2),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“FreqMid”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”、500、3 e3}.．.“风格”，“rotaryknob”，.．.“布局”(5, 2),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“GainHigh”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”,(2、3、4、3),.．.“DisplayName的”，“高”，“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“FreqHigh”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”3 e3, 20 e3},.．.“风格”，“rotaryknob”，.．.“布局”, [3],.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“体积”，.．.“DisplayName的”，“体积”，.．.“映射”, {“林”0 2}.．.“风格”，“rotaryknob”，.．.“布局”(3、5),.．.“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“启用”，.．.“风格”，“vtoggle”，.．.“布局”, 5, 5],.．.“DisplayNameLocation”，“没有”)，.．..．.audioPluginGridLayout (.．.“RowHeight”(20、20160、20100),.．.“ColumnWidth”(100100100、50150),.．.“填充”[20] 20120年,20日),.．.< %——.．.“分辨率”，“background.png”，.．.< %——“写成BackgroundColor”(210/255,210/255,210/255))< %——结束.．.为举例目的省略结束

调用parameterTuner的UI可视化equalizerV3．

parameterTuner (equalizerV3)

自定义控制幻灯片

若要使用自定义幻灯条，请指定幻灯片而且FilmstripFrameSize中的名称-值对audioPluginParameter．幻灯可以是PNG、GIF或JPG文件，应该由垂直或水平端到端放置的帧组成。幻灯片被映射到控件的范围，以便当你调优参数时，相应的幻灯片帧会显示在插件UI上。在这个例子中，指定一个两帧幻灯片启用参数。作为最佳实践，薄膜条的每一帧的大小应该等于该参数所占区域的大小。的启用参数占用一个单元格，大小为150 × 100像素。要创建一个垂直幻灯片，其中每帧是150 × 100，使幻灯片的总尺寸为150 × 200，并设置FilmstripFrameSize来[150100]．本例中使用的幻灯片首先包含与关闭位置对应的帧，然后是打开位置:

classdefequalizerV4 < audioPlugin.．.为举例目的省略了。属性(常量)PluginInterface = audioPluginInterface(常量).．.audioPluginParameter (“GainLow”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”, (2, 1; 4, 1],.．.“DisplayName的”，“低”，“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“FreqLow”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”20500},.．.“风格”，“rotaryknob”，.．.“布局”(5、1),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“GainMid”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”, (2, 2, 4, 2),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“FreqMid”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”、500、3 e3}.．.“风格”，“rotaryknob”，.．.“布局”(5, 2),.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“GainHigh”，.．.“标签”，“数据库”，.．.“映射”, {“林”-20年,20},.．.“风格”，“vslider”，.．.“布局”,(2、3、4、3),.．.“DisplayName的”，“高”，“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“FreqHigh”，.．.“标签”，“赫兹”，.．.“映射”, {“日志”3 e3, 20 e3},.．.“风格”，“rotaryknob”，.．.“布局”, [3],.．.“DisplayNameLocation”，“没有”)，.．.audioPluginParameter (“体积”，.．.“映射”, {“林”0 2}.．.“风格”，“rotaryknob”，.．.“布局”(3、5),.．.“DisplayNameLocation”，“以上”)，.．.audioPluginParameter (“启用”，.．.“风格”，“vtoggle”，.．.“布局”, 5, 5],.．.“DisplayNameLocation”，“没有”，.．.“幻灯片”，“vtoggle.png”，.．.< %——“FilmstripFrameSize”[150100]),.．.< %——.．.audioPluginGridLayout (.．.“RowHeight”(20、20160、20100),.．.“ColumnWidth”(100100100、50150),.．.“填充”[20] 20120年,20日),.．..．.“分辨率”，“background.png”，.．.“写成BackgroundColor”(210/255,210/255,210/255))结束.．.为举例目的省略了。结束

不支持幻灯片parameterTuner．要查看自定义插件UI，必须将插件部署到DAW。使用generateAudioPlugin创建VST插件。

generateAudioPluginequalizerV4

……

在本例中，插件在REAPER中打开。REAPER的UI截图如下所示。

另请参阅