更新于 2017.12.1 krpano 1.19-pr14
官方下载包路径(1.18)
examples/plugin-examples/directionalsound/directionalsound.html
说明
首先你可以查看krpano的声音插件官方文档、背景声音的四种用法、音量控制这3篇教程
另外,你也可以免费下载声音播放辅助插件
在krpano中,要涉及到声音,需要先做三件事情:
- 将音频文件放在对应的文件夹中,根目录也好,或者你自己建一个sound文件夹也好。你需确保其路径是正确的。
- 将krpano安装包viewer文件夹中plugins文件夹中的soundinterface.js与soundinterface.swf两个文件拷贝到项目的plugins文件夹。
- 在tour.xml或vtourskin.xml的某个空白位置(不要放在scene标签内即可)插入以下代码:
1234567<plugin name="soundinterface"url="%SWFPATH%/plugins/soundinterface.swf"alturl="%SWFPATH%/plugins/soundinterface.js"rootpath=""preload="true"keep="true"/>
正如标题所示,我们要的是一种3D声音,好比我们的全景图中有一个音响,我们把声音像放热点一样安排在音响的位置,当全景转到音响处时,会很明显有一种由远至近的感觉,而且如果你是用两个音箱或者耳机的话,还会有一种环绕立体声的感觉。(注意,官方音频插件关于3D声音的应用仅限于Flash,目前要在HTML5下使用请使用第三方音频插件)
我们在要加热点的地方加上
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<hotspot name="b1" url="button1.png" ath="0" atv="0" onclick="playsound3D(s1,music1.mp3, 0,0);" /> |
如果你只是想要一个声音,不希望展示实际热点在哪里,也就是隐藏掉图片,我们可以改为:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<hotspot name="b1" url="button1.png" alpha="0" ath="0" visible="false" atv="0" onloaded="playsound3D(s1,music1.mp3, 0,0);" /> |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 |
<!-- playsound3D 与 playsound3DHS 在HTML5下不可用,用普通的播放声音action代替 --> <action name="playsound3D" devices="html5">playsound(%1,%2);</action> <action name="playsound3DHS" devices="html5">playsound(%1,%2);</action> |
另外几种用法:
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 |
<!-- 在 90/0 处播放声音,范围为120度 --> <hotspot name="b2" url="button2.png" ath="90" atv="0" onclick="playsound3D(s2,music2.mp3, 90,0, 120); " /> <!-- 在b3按钮处播放声音 --> <hotspot name="b3" url="button3.png" ath="180" atv="0" onclick="playsound3DHS(s3,music3.mp3, b3);" /> <!-- 停止其他声音的播放,让b4热点环绕运动20秒至ath为630,也就是环绕一圈,同时声音和b4一同环绕播放 --> <hotspot name="b4" url="button4.png" ath="270" atv="0" onclick="stopallsounds(); playsound3DHS(s4, music4.mp3, b4); tween(ath,630,20);" /> |
插件动作详解
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声音。
在 “移花接木(7)- 添加具有方向性的3D声音” 上有 1 条评论