如何在构建音频图表中映射到数据?

在数据可视化中,声音化技术使人们可以在没有视觉辅助的情况下探索数据。这对于视力障碍者或在难以通过视觉解读数据的场景中特别有帮助,但也可以用来打造更具吸引力的数据可视化体验,或者提醒用户注意事项。

Highcharts 支持通过 sonification 模块实现音频图表,提供了一个声化模块,允许你完全控制用声音播放数据。该声化模块支持多种不同的应用场景,并且设计时考虑了极大的灵活性。。本教程将是帮助你在构建音频图表中设置数据映射。

Mapping to Data 映射到数据

在将数据转为声音时,最常见的用例是指定你希望演奏的乐器,然后将数据属性映射到各种乐器参数上。

例如,你可以将Y值映射到乐器的音高,从而产生一个随着数据值升高而音调上升的声音。

下面的图表演示了声化模块可以映射的一些不同音频参数,以及它们的作用:

配置

在Highcharts中定义轨道映射有多种方法。最简单的一种是固定映射,即让一个音频参数保持固定值:

js 复制代码
sonification: {
    duration: 4000,
    defaultInstrumentOptions: {
        instrument: 'saxophone',
        mapping: {
            volume: 0.4,
            pan: 0,
            noteDuration: 300,
            pitch: 'a3'
        }
    }
}

使用上述配置,音频数值保持不变,不会发生变化。对于每个数据点,我们将播放"a3"音符300毫秒,音量为0.4,位于立体声声场的中心位置。显然,这并不能传达很多信息,所以我们更倾向于将某些内容映射到数据属性上:

js 复制代码
mapping: {
    volume: 0.4,
    pan: 0,
    noteDuration: 300,
    pitch: 'y'
}

通过将音高映射更改为"y",乐器的音高会随着Y值的变化而变化。较低的Y值会导致较低的音调,较高的Y值则会导致较高的音调。我们可以将任何参数映射到任何数据点属性。使用点符号访问嵌套属性。

我们通常希望定义乐器的音高范围。这可以通过向映射参数传递配置对象来实现:

js 复制代码
mapping: {
    volume: 0.4,
    pan: 0,
    noteDuration: 300,
    pitch: {
        mapTo: 'y',
        min: 'c3',
        max: 'g6'
    }
}

现在我们将映射到这个乐器的音域范围内,这样最低的Y值将对应"c3"音符,最高的则对应"g6"音符。

有关所有映射属性的完整概述,以及每个属性的详细配置选项,请参阅乐器轨道的 defaultInstrumentOptions.mapping 和语音轨道的 defaultSpeechOptions.mapping 。

有效映射

声音化既是一门科学,也是一门艺术,虽然没有绝对正确的做法,但这里有七个科学上的建议,如果你的目标是让声音体验变得直观,这些建议可能会有所帮助:

  1. 音高映射通常在传达数量或大小时非常直观。就大小而言,较低的音高通常意味着更大。
  2. G4到F6的音高范围对于大多数人来说是最准确的,如果可以接受较窄的范围。
  3. 同的乐器/音色可以用来分类声音并创造分离,但不同乐器之间的比较有时会更困难。
  4. 时长可以用来传达重要性。使用时要谨慎,因为它可能会与其他声音重叠,也可能打断用户的操作流程,如果持续时间过长。
  5. 音量可以用来表达强度,但很难听出细微的音量差异,而且在不同设备上听到的效果也会不同。
  6. 拍子,比如颤音或改变音符之间的间隔,有助于传达强度或速度。大多数人较容易听出节奏的微小差异。
  7. 立体声声像定位通常很有帮助,但需要用户使用耳机或立体声扬声器,因此通常不应单独依赖它。

Dual coding 双重编码 :

完全可以将同一数据属性映射到多个音频参数,这通常是个不错的主意。例如,你可以将Y值同时映射到音量、持续时间和音调,以强调Y值变化在特定数据集中的重要性。

js 复制代码
sonification: {
    duration: 4000,
    defaultInstrumentOptions: {
        instrument: 'saxophone',
        mapping: {
            pan: 0,
            volume: 'y',
            noteDuration: 'y',
            pitch: 'y'
        }
    }
}

Information Overload 信息过载 :

如果同时进行的声音信息太多,容易让用户感到信息过载。这一点尤其适用于多个声部同时播放的情况。

一般来说,同时变化的参数超过三个会变得混乱。如果变化足够明显,大多数人可以持续跟踪两个参数的变化。

话虽如此,声音化有时也被用来理解庞大而复杂的数据集,其目标不再是传达所有数据,而是用来听出其中的模式或异常。在这些情况下,声音场通常会更复杂,伴随着许多元素同时发生。

文章更新发布于 2026 年 2 月 3 日

相关推荐
林墨聊AIGC25 分钟前
AI分镜模板:一键生成高效短剧视觉流程
人工智能·ai作画·aigc·音视频·ai写作
程序员JerrySUN34 分钟前
Jetson Edge AI 实战05:Secure Boot 到底在保护什么?PKC、SBK、Fuse 与可信启动链一次讲清【视频讲解】
arm开发·人工智能·安全·计算机视觉·目标跟踪·音视频
voipmaker37 分钟前
选煤厂智能化:UWB 人员定位系统 WebAPI 对接融合通信平台实战
物联网·实时互动·json·音视频·实时音视频·web·视频
用户83134859306981 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
漫步人生走在路上1 小时前
用小语种SEO突破外贸B2B天花板:法语、德语市场的实测数据
开发语言·前端·javascript·人工智能·搜索引擎·ecmascript
木头左2 小时前
音频转文字与说话人识别部署与使用指南
音视频
DogDaoDao2 小时前
当视频理解撞上大语言模型:一篇 37 页综述的全景拆解
人工智能·语言模型·音视频·知识图谱·视频
ydjs678899-bot3 小时前
您的Next.js中间件匹配器配置可能会跳过您认为它保护的路由
开发语言·javascript·中间件
Chengbei113 小时前
JsOwl|AI 赋能 JS 敏感信息扫描器,AST + 正则、source‑map 源码还原、登录态爬虫输出交互式 HTML 报告
开发语言·javascript·网络·人工智能·爬虫·网络安全·自动化
阿明副业观察3 小时前
AI短剧分镜秘籍:从零到电影级视觉冲击
大数据·人工智能·aigc·音视频·ai写作