移花接木（7）- 添加3D定位音频

krpano官方案例移花接木, 插件使用说明, 第三方插件

更新于 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
  • h和v
    • 以度数为单位的球面位置。
    • 水平位置从-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
  • x、y、z
    • 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（可选）
    • 定义当声音移动时使用哪种算法来减少音量。
    • 可使用的设置：linear、exponential、inverse（默认）。
  • panningModel（可选）
    • 用于在三维空间中定位声音的空间化算法。
    • 可使用的设置：equalpower、HRTF（默认）

例如：

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.js与soundinterface.swf两个文件拷贝到项目的plugins文件夹。
  3. 在tour.xml或vtourskin.xml的某个空白位置（不要放在scene标签内即可）插入以下代码：

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

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

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

url链接的是一个图片。ath和atv定义了热点在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 条评论

  2. Pingback： 本站教程汇总及VIP会员加入方式 - krpano教程

发表评论