移花接木(7)- 添加3D定位音频

更新于 2019.10.2 krpano 1.20.1

官方下载包路径

1.20.1版本 viewer/examples/directional3dsound/directional3dsound.xml

1.18版本 examples/plugin-examples/directionalsound/directionalsound.html

 

1.20.1版本说明(支持HTML5)

  • krpano 1.20.1版本的Soundinterface插件扩展krpano播放声音的功能。可简单地用于背景音乐或者音效,也可以用于3D位置音频,例如环境音效或者WebVR用途。
  • 支持Sound Sprites
  • 可自动完成对声音文件的缓存和再使用。
  • 通过krpano动作或JavaScript对Sound Objects进行细节上的控制。
  • 插件可自动处理浏览器/手机对自动播放的限制,例如当无法自动播放时,会等待用户的下一次交互来触发播放。
  • 插件使用howler.js库处理浏览器音频api。

因此必须要将krpano升级到1.20.1版本,才能使用下面的动作。

krpano提供了三种坐标方式,分别是球面位置、三维坐标以及热点位置。

三维坐标可以理解在一个全景的六面体中,我们处于这个立方体的中心,那么我们所处的坐标就是(0,0,0)对应是x轴、y轴、z轴。

使用下面的动作即可创建播放一个3D定位音频。

playsound_at_hv(name, url, h, v*, depth*, loop*, volume*, oncomplete*)
  • 在球面位置上播放一个3D定位音频。
  • 使用setup3dsound() 或 sound[name].setup3d() 动作自定义3D声音空间化。
  • 创建一个Sound Object用于进一步的动态使用。
  • 如果是从JavaScript调用这些动作,则会将Sound Object作为返回值。

参数:

  • name
    • 声音的名字或id。
    • 用于定位该声音。
    • 如果该名字已经有一个旧的声音在使用,同时调用的是新的地址的话,则旧声音会被停止。
    • 如果将auto用作name,则会自动生成一个独有的名字。
  • url
  • hv
    • 以度数为单位的球面位置。
    • 水平位置从-180到+180,垂直位置从-90到90(超过这个范围会自动绕回)。
    • 如没有设置v,则使用默认值0。
  • depth(可选)
    • 球面位置的深度/距离。
    • 如没有设置,默认为1000。
  • loop(可选)
    • 声音是否循环播放的布尔值。
    • 如果没有设置,则默认为false(不循环)。
  • volume(可选)
    • 该声音的音量。
    • 数值范围:0.0 – 1.0,默认为1.0。
  • oncomplete(可选)
    • 播放完全结束时调用的代码,可以是krpano动作或者是JavaScript函数。
    • 如果循环被启用,则该事件不会被调用。
playsound_at_xyz(name, url, x,y,z, loop*, volume*, oncomplete*)
  • 在3D XYZ位置上播放一个3D定位音频。
  • 使用setup3dsound() 或 sound[name].setup3d() 动作自定义3D声音空间化。
  • 创建一个Sound Object用于进一步的动态使用。
  • 如果是从JavaScript调用这些动作,则会将Sound Object作为返回值。

参数:

  • name
    • 声音的名字或id。
    • 用于定位该声音。
    • 如果该名字已经有一个旧的声音在使用,同时调用的是新的地址的话,则旧声音会被停止。
    • 如果将auto用作name,则会自动生成一个独有的名字。
  • url
  • xyz
    • 3D XYZ位置。
  • loop(可选)
    • 声音是否循环播放的布尔值。
    • 如果没有设置,则默认为false(不循环)。
  • volume(可选)
    • 该声音的音量。
    • 数值范围:0.0 – 1.0,默认为1.0。
  • oncomplete(可选)
    • 播放完全结束时调用的代码,可以是krpano动作或者是JavaScript函数。
    • 如果循环被启用,则该事件不会被调用。
playsound_at_hotspot(name, url, hotspot, loop*, volume*, oncomplete*)
  • 在热点位置上播放一个3D定位音频。
  • 使用setup3dsound()或 sound[name].setup3d()动作自定义3D声音空间化。
  • 创建一个Sound Object用于进一步的动态使用。
  • 如果是从JavaScript调用这些动作,则会将Sound Object作为返回值。

参数:

  • name
    • 声音的名字或id。
    • 用于定位该声音。
    • 如果该名字已经有一个旧的声音在使用,同时调用的是新的地址的话,则旧声音会被停止。
    • 如果将auto用作name,则会自动生成一个独有的名字。
  • url
  • hotspot
    • 热点的name或者直接是热点object自身。
  • loop(可选)
    • 声音是否循环播放的布尔值。
    • 如果没有设置,则默认为false(不循环)。
  • volume(可选)
    • 该声音的音量。
    • 数值范围:0.0 – 1.0,默认为1.0。
  • oncomplete(可选)
    • 播放完全结束时调用的代码,可以是krpano动作或者是JavaScript函数。
    • 如果循环被启用,则该事件不会被调用。
setup3dsound(name, refDistance, rolloffFactor, distanceModel*, panningModel*)
  • 自定义一个3D定位音频。

参数:

  • name
    • 声音的名字或id。
    • 需要有一个拥有该name的声音。
  • refDistance
    • 当声音远离时音量减少的参考距离。
    • 默认值为1.0。
  • rolloffFactor
    • 当声音远离时定义音量减少的速度。
    • 默认值为1.0。
  • distanceModel(可选)
    • 定义当声音移动时使用哪种算法来减少音量。
    • 可使用的设置:linearexponentialinverse(默认)。
  • panningModel(可选)
    • 用于在三维空间中定位声音的空间化算法。
    • 可使用的设置:equalpowerHRTF(默认)

例如:

krpano 1.20版本下目前测试Chrome无法获得3D定位音频效果,火狐69版本则使用正常。请使用krpano 1.20.1版本。

点击链接查看官方例子。使用耳机听声音。

 

1.18 – 1.19版本说明(只支持Flash)

首先你可以查看krpano的声音插件官方文档背景声音的四种用法音量控制这3篇教程

另外,你也可以免费下载声音播放辅助插件

在krpano中,要涉及到声音,需要先做三件事情

  1. 将音频文件放在对应的文件夹中,根目录也好,或者你自己建一个sound文件夹也好。你需确保其路径是正确的。
  2. 将krpano安装包viewer文件夹中plugins文件夹中的soundinterface.jssoundinterface.swf两个文件拷贝到项目的plugins文件夹。
  3. tour.xmlvtourskin.xml的某个空白位置(不要放在scene标签内即可)插入以下代码:

正如标题所示,我们要的是一种3D声音,好比我们的全景图中有一个音响,我们把声音像放热点一样安排在音响的位置,当全景转到音响处时,会很明显有一种由远至近的感觉,而且如果你是用两个音箱或者耳机的话,还会有一种环绕立体声的感觉。(注意,官方音频插件关于3D声音的应用仅限于Flash,目前要在HTML5下使用请使用第三方音频插件

我们在要加热点的地方加上

点击代码窗口最右侧按钮,在新窗口打开后复制代码

url链接的是一个图片。athatv定义了热点在3D空间中的位置。onclick定义鼠标点击的事件。

如果你只是想要一个声音,不希望展示实际热点在哪里,也就是隐藏掉图片,我们可以改为:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

这样在一开始加载热点的时候就会播放声音,而且也看不到你的图片。另外因为html5不支持3D声音,需要加上一个html5下的调用action

点击代码窗口最右侧按钮,在新窗口打开后复制代码

上面的playsound就是普通播放声音的用法。

另外几种用法:

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

1.18 – 1.19版本插件动作详解

hotspot的代码是放置几个按钮所用,在这里为了表现方向性声音,因此使用了onclick的鼠标动作来触发3D声音的播放。

playsound3D(s2,music2.mp3, 90,0, 120);

  • playsound3D(name, audiofile, ath, atv, range*, volume*, loops*, oncomplete*) (仅限Flash)
    • 在指定的球面位置播放3D声音
    • name = 指定名字,在本例中为s2
    • audiofile = 路径,在本例中是music3.mp3
    • ath = 水平位置 (-180 .. 180) 本例为90
    • atv = 垂直位置 (-90 .. +90) 本例为0
    • range =声音可听范围(单位为度数,默认为90) (*可选) 本例为120度
    • volume = 音量 (0.0 – 1.0, 默认为1.0)(*可选)
    • loops = 循环值, 0是循环, 默认为1 (*可选)
    • oncomplete = 播放结束后要执行的action (*可选)

playsound3DHS(s4, music4.mp3, b4); tween(ath,630,20);

  • playsound3DHS(name, audiofile, hotspotname, range*, volume*, loops*, oncomplete*) (仅限Flash)
    • 在指定的热点位置播放3D声音.
    • 热点运动时声音也跟随热点发生方位变化
    • name = 指定名字,在本例中为s4
    • audiofile = 路径,在本例中是music4.mp3
    • hotspotname = 热点名字,本例即为b4的按钮
    • range =声音可听范围(单位为度数,默认为90) (*可选) 本例为120度
    • volume = 音量 (0.0 – 1.0, 默认为1.0)(*可选)
    • loops = 循环值, 0是循环, 默认为1 (*可选)
    • oncomplete = 播放结束后要执行的action (*可选)

tween使得b4的ath位置在20秒内从270变化到630,也就是这个按钮绕着场景转了360度,也就是20秒内环绕一圈,在这个时间里声音也跟随播放。

 

1.18 – 1.19版本提示

因为目前官方的3D声音仅支持FLASH,换而言之,正常情况下是不能在手机上使用3D声音。因此上面两个action在HTML5下是没有意义的。

可以查看下面的链接了解如何在HTML5下使用3D声音。

第三方HTML5音频插件

在 “移花接木(7)- 添加3D定位音频” 上有 2 条评论

发表评论