文章目录

导言

我们要实现的三种用法分别是：

在项目启动时即播放背景音乐、即使场景切换音乐也不会变化
全局声音与单场景声音
随心所欲控制各场景声音，也就是不同场景可能用同一背景音乐，而没有中断

以上所有三种情况都需要先做三件事情：

将音频文件放在对应的文件夹中，根目录也好，或者你自己建一个sound文件夹也好。你需确保其路径是正确的。
将krpano安装包viewer文件夹中plugins文件夹中的soundinterface.js与soundinterface.swf两个文件拷贝到项目的plugins文件夹。
在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"
/>

声音在krpano中的使用有些特殊情况，尤其是手机端，请查看soundinferface插件官方说明文档

在项目启动时即播放背景音乐、即使场景切换音乐也不会变化

正如标题所示，我们要的就是一个一直在背景中持续播放的声音。在tour.xml找到下面的代码

<action name="startup">
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);
</action>

if(startscene === null, copy(startscene,scene[0].name));

loadscene(get(startscene), null, MERGE);

</action>

改为

<action name="startup">
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);
playsound(bgsnd, 'backgroundmusic.mp3', 0);
</action>

if(startscene === null, copy(startscene,scene[0].name));

loadscene(get(startscene), null, MERGE);

playsound(bgsnd, 'backgroundmusic.mp3', 0);

</action>

playsound是播放普通声音的action，bgsnd代表该声音的id，名字要与其它声音的id不冲突，‘backgroundmusic.mp3’对应声音文件的路径，0代表循环播放，填1则代表只播放一次。

如果你用那么一个按钮，则可以在layer上添加onclick属性控制声音的暂停和播放。

onclick="pausesoundtoggle(bgsnd);"

1	onclick="pausesoundtoggle(bgsnd);"

既有全局背景声音也有单场景的解说声音

全局的背景声音始终在各个场景中荡漾，同时切换到不同的场景时，不同场景有自己的声音。

在tour.xml找到下面的代码

<action name="startup">
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);
</action>

if(startscene === null, copy(startscene,scene[0].name));

loadscene(get(startscene), null, MERGE);

</action>

改为

<action name="startup">
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);
playsound(bgsnd, 'backgroundmusic.mp3', 0);
</action>

if(startscene === null, copy(startscene,scene[0].name));

loadscene(get(startscene), null, MERGE);

playsound(bgsnd, 'backgroundmusic.mp3', 0);

</action>

以上是实现背景音乐，下面是加上每个场景的音乐。

方法一：

首先加入一个events和一个action，主要是在每个场景切换时执行一次playsound

<events name="audioscene" keep="true" onnewscene="ChangeScene();"/>
<action name="ChangeScene">
set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3');
playsound(curaudio, get(_audiourl));
</action>

set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3');

playsound(curaudio, get(_audiourl));

</action>

然后在每个scene标签中加sound=”audio1″，也即是audio文件夹中的mp3文件的名字，注意是不带前缀的。

 <!--  scenes  -->
 <!--  audio1 is the name of the mp3 in the audio folder  -->
<scene name="scene_1" title="a1" onstart="" autoload="true" sound="audio1">
<preview type="grid(cube,64,64,512,0x666666,0x222222,0x222222);" details="16"/>
<view hlookat="0"/>
<hotspot name="spot1" url="VT.png" ath="0" atv="0" onclick="loadscene(scene_2);"/>
</scene>

<scene name="scene_2" title="a2" onstart="" sound="audio2">
<preview type="grid(cube,64,64,512,0xffff00,0x336699,0xffffff);" details="16"/>
<view hlookat="0"/>
<hotspot name="spot1" url="VT.png" ath="0" atv="0" onclick="loadscene(scene_1);"/>
</scene>
</krpano>

</scene>

</scene>

</krpano>

方法二：

是使用了一个启动画面来触发音乐的播放。看下面splash的onclick，执行了一次FirstStart。

krpano logkey="true">
 <!--  intro  -->
<layer name="splash" type="text" keep="true" zorder="100" align="center" html="START" vcenter="true" padding="20" onclick="FirstStart"/>

<layer name="dip" keep="true" type="container" align="lefttop" width="100%" height="100%" bgcolor="0x000000" bgalpha="1"/>

<action name="FirstStart">
set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3'); playsound(curaudio, get(_audiourl)); tween(plugin[soundinterface].volume,1,2); removelayer(splash); tween(layer[dip].alpha,0,2,,removelayer(dip));
</action>

<plugin name="soundinterface" keep="true" url="plugins/soundinterface.js" preload="true" volume="1" mute="false"/>

<action name="ChangeScene">
loadscene(%1); set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3'); playsound(curaudio, get(_audiourl));
</action>

 <!--  scenes  -->

 <!--  audio1 is the name of the mp3 in the audio folder  -->

<scene name="scene_1" title="a1" onstart="" autoload="true" sound="audio1">
<preview type="grid(cube,64,64,512,0x666666,0x222222,0x222222);" details="16"/>
<view hlookat="0"/>
<hotspot name="spot1" url="VT.png" ath="0" atv="0" onclick="ChangeScene(scene_2);"/>
</scene>
<scene name="scene_2" title="a2" onstart="" sound="audio2">
<preview type="grid(cube,64,64,512,0xffff00,0x336699,0xffffff);" details="16"/>
<view hlookat="0"/>
<hotspot name="spot1" url="VT.png" ath="0" atv="0" onclick="ChangeScene(scene_1);"/>
</scene>
</krpano>

krpano logkey="true">

set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3'); playsound(curaudio, get(_audiourl)); tween(plugin[soundinterface].volume,1,2); removelayer(splash); tween(layer[dip].alpha,0,2,,removelayer(dip));

</action>

loadscene(%1); set(_audiourl, calc:'audio/' + scene[get(xml.scene)].sound + '.mp3'); playsound(curaudio, get(_audiourl));

</action>

</scene>

</scene>

</krpano>

默认下音频文件的路径是相当于viewer文件。

这里的情况是假设你每个场景都有单独的解说，因此你在每个场景都要加入bgmusic=“xxx.mp3” 这样的属性。这样的话，背景音乐会一直播放，同时每个场景都有自己的声音。

随心所欲控制各场景声音

我们来假设这么一种情况。有三个展厅，每个展厅我们有三个场景，但我们只有三个解说词对应着这三个展厅，也就是当同一展厅的场景互相切换时，我们需要解说词是持续的，而不是因场景的变换而停止或重新开始。例如展厅1的场景a、b、c之间的相互切换，或展厅2的场景d、e、f的相互切换时，其解说词是流动的，只有当不同展厅的场景切换时，才会中止之前展厅的解说词，而开始新的展厅的解说词，例如从展厅1的场景b到展厅2的场景f。

我们来假定四个场景，其中第一个场景和第三个场景属于一个“展厅”，第二个和第四个场景属于另外一个“展厅”，至于全局音乐为了方便，我们暂时不添加。
我们在tour.xml找到skin_settings标签，大概是这样的

<skin_settings maps="false"
maps_type="bing"
maps_bing_api_key=""
maps_zoombuttons="false"
gyro="true"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
loadscene_flags="MERGE"
loadscene_blend="BLEND(0.5)"
controlbar_offset="20"
/>

<skin_settings maps="false"

maps_type="bing"

maps_bing_api_key=""

maps_zoombuttons="false"

gyro="true"

title="true"

thumbs="true"

thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"

thumbs_opened="false"

thumbs_text="false"

thumbs_dragging="true"

thumbs_onhoverscrolling="false"

thumbs_scrollbuttons="false"

thumbs_scrollindicator="false"

thumbs_loop="false"

tooltips_thumbs="false"

tooltips_hotspots="false"

tooltips_mapspots="false"

loadscene_flags="MERGE"

loadscene_blend="BLEND(0.5)"

controlbar_offset="20"

我们在skin_settings标签内增加

musicgroup="0"

1	musicgroup="0"

然后我们对四个场景进行处理，注意省略号代表了中间省略了的代码，显示的是你需要增加的代码以及对应的位置。我们列出的是scene的情况。

<scene name="scene1"… group="1" scenemusic="scene1music.mp3">


...

</scene>

<scene name="scene2"… group="2" scenemusic="scene2music.mp3">


...

</scene>

<scene name="scene3"… group="1" scenemusic="scene1music.mp3">


...

</scene>

<scene name="scene4"… group="2" scenemusic="scene2music.mp3">


...

</scene>

...

</scene>

...

</scene>

...

</scene>

...

</scene>

同时在scene外加上events代码

<events name="scene1events" keep="true"
	onxmlcomplete="
	ifnot(scene[get(xml.scene)].group == skin_settings.musicgroup,
	playsound(scenesound, get(scene[get(xml.scene)].scenemusic),1);
	copy(skin_settings.musicgroup,scene[get(xml.scene)].group));" 
	 />

<events name="scene1events" keep="true"

onxmlcomplete="

ifnot(scene[get(xml.scene)].group == skin_settings.musicgroup,

playsound(scenesound, get(scene[get(xml.scene)].scenemusic),1);

copy(skin_settings.musicgroup,scene[get(xml.scene)].group));"

控制场景中不同位置的3D声音（旧版本Flash可用）

<krpano version="1.19" title="Virtual Tour" now_play=""><!-- 这里加一个   now_play="" -->
	
	<include url="%SWFPATH%/plugins/showtext.xml" /><!-- 这里加一句 -->
	
	<scene name="scene_pano_sphere" title="pano_sphere" onstart="" thumburl="panos/pano_sphere.tiles/thumb.jpg" lat="" lng="" heading="">

		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

		<preview url="panos/pano_sphere.tiles/preview.jpg" />

		<image>
			<cube url="panos/pano_sphere.tiles/pano_%s.jpg" />
			<mobile>
				<cube url="panos/pano_sphere.tiles/mobile_%s.jpg" />
			</mobile>
		</image>

		<!-- place your scene hotspots here -->

		<hotspot name="spot1" style="skin_soundbutton" ath="13.267" atv="-6.054" text="介绍1" sound="1.mp3" />
		<hotspot name="spot2" style="skin_soundbutton" ath="-105.872" atv="-7.814" text="介绍3" sound="3.mp3" />
		<hotspot name="spot3" style="skin_soundbutton" ath="151.117" atv="-2.083"  text="介绍4" sound="5.mp3" />

	</scene>

<!--以下内容复制到xml文件即可 scene标签外 -->

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

        <style name="skin_soundbutton" url="ypopen.png"  onhover="showtext(get(text),STYLE2);" distorted="true"
               onclick="stopallsounds();
               if(url == ypopen.png,
               	playsound(get(name),get(sound),1);if(now_play != name, set(hotspot[get(now_play)].url,ypopen.png););set(now_play,get(name)),
               	stopsound(get(name));
               	);
               switch(url,ypopen.png,ypclose.png);"  />  

        <textstyle name="STYLE2"
	           font="Arial" fontsize.no-mobile="18" fontsize.mobile="28" bold="true"
	           background="false" border="false"
	           textcolor="0xFFFFFF"
	           textalign="center"
	           textshadow="0.01" textshadowrange="3" textshadowcolor="0x000000"
	           yoffset.touch="-40"
	           /> 


	     <include url="%SWFPATH%/plugins/showtext.xml" />


	           <!-- 复制内容结束为止 -->



</krpano>

<image>

</mobile>

</image>

</scene>

<plugin name="soundinterface"

url="%SWFPATH%/plugins/soundinterface.swf"

alturl="%SWFPATH%/plugins/soundinterface.js"

rootpath=""

preload="true"

keep="true"

onclick="stopallsounds();

if(url == ypopen.png,

playsound(get(name),get(sound),1);if(now_play != name, set(hotspot[get(now_play)].url,ypopen.png););set(now_play,get(name)),

stopsound(get(name));

);

switch(url,ypopen.png,ypclose.png);" />

<textstyle name="STYLE2"

font="Arial" fontsize.no-mobile="18" fontsize.mobile="28" bold="true"

background="false" border="false"

textcolor="0xFFFFFF"

textalign="center"

textshadow="0.01" textshadowrange="3" textshadowcolor="0x000000"

yoffset.touch="-40"

</krpano>

声音相关 | krpano声音的四种使用方法

导言

在项目启动时即播放背景音乐、即使场景切换音乐也不会变化

既有全局背景声音也有单场景的解说声音

随心所欲控制各场景声音

控制场景中不同位置的3D声音（旧版本Flash可用）

在 “声音相关 | krpano声音的四种使用方法” 上有 2 条评论

发表评论取消回复

导言

在项目启动时即播放背景音乐、即使场景切换音乐也不会变化

既有全局背景声音也有单场景的解说声音

随心所欲控制各场景声音

控制场景中不同位置的3D声音（旧版本Flash可用）

在 “声音相关 | krpano声音的四种使用方法” 上有 2 条评论

发表评论 取消回复

发表评论取消回复