更新于 2020.11.19 krpano 1.20.9
官方下载包路径
1.20.9版本 viewer/examples/directional3dsound/directional3dsound.xml
1.18版本 examples/plugin-examples/directionalsound/directionalsound.html
1.20版本说明(支持HTML5)
- krpano 1.20版本之后的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*) |
---|
参数:
|
playsound_at_xyz(name, url, x,y,z, loop*, volume*, oncomplete*) |
参数:
|
playsound_at_hotspot(name, url, hotspot, loop*, volume*, oncomplete*) |
参数:
|
setup3dsound(name, refDistance, rolloffFactor, distanceModel*, panningModel*) |
参数:
|
例如:
1 2 3 4 5 |
<!-- start playing the sound --> <events name="currentpano" onnewpano="playsound_at_xyz(bgsnd, '%VIEWER%/2.mp3',100,0,1000);setup3dsound(bgsnd, 10, 10);" onremovepano="stopsound(bgsnd);" /> |
点击链接查看官方例子。使用耳机听声音。
1.18 – 1.19版本说明(只支持Flash)
首先你可以查看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);" /> |
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声音。
音乐切换场景后还是继续播放….
如何切换场景后就停止上一个场景的音乐?