更新于 2017.12.1 krpano 1.19-pr14

官方下载包路径（1.18）

examples/plugin-examples/directionalsound/directionalsound.html

 

 

说明

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

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

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

1. 将音频文件放在对应的文件夹中，根目录也好，或者你自己建一个sound文件夹也好。你需确保其路径是正确的。
2. 将krpano安装包viewer文件夹中plugins文件夹中的soundinterface.js与soundinterface.swf两个文件拷贝到项目的plugins文件夹。
3. 在tour.xml或vtourskin.xml的某个空白位置（不要放在scene标签内即可）插入以下代码：
   
   <plugin name="soundinterface" url="%SWFPATH%/plugins/soundinterface.swf" alturl="%SWFPATH%/plugins/soundinterface.js" rootpath="" preload="true" keep="true" />

   1 2 3 4 5 6 7

   <plugin name="soundinterface" url="%SWFPATH%/plugins/soundinterface.swf" alturl="%SWFPATH%/plugins/soundinterface.js" rootpath="" preload="true" keep="true" />

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

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

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

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

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

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

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

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

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

另外几种用法：

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

 

插件动作详解

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秒内环绕一圈，在这个时间里声音也跟随播放。

 

提示

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

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

第三方HTML5音频插件