移花接木(7)- 添加具有方向性的3D声音

更新2016.8.2

官方下载包路径

examples/plugin-examples/directionalsound/directionalsound.html

演示

 

说明

首先你可以查看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就是普通播放声音的用法。

另外几种用法:

 

详解:

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声音仅支持FLASH5,换而言之,正常情况下是不能在手机上使用3D声音。因此这两个action在HTML5下就相当于自定义的action,而不是系统的action。

第三方HTML5音频插件

 

 

在 “移花接木(7)- 添加具有方向性的3D声音” 上有 1 条评论

发表评论