移花接木(2)- 添加背景音乐和控制声音播放的按钮

更新 2016.8.6

官方下载包路径

examples\plugin-examples\backgroundsound\backgroundsound.html  (1.18)

你电脑的路径\krpano-1.19-pr6\viewer\examples\backgroundsound\ (1.19)

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

说明

你可以查看krpano的声音插件官方文档背景声音的四种用法音量控制这3篇教程了解更多关于krpano声音的用法。

 

本站免费插件:声音播放辅助插件

 

在krpano中涉及到声音的话,需要先做三件事情:

  1. 将音频文件放在对应的文件夹中,根目录vtour也好,或者建一个sound文件夹也好。你需确保音频的路径是正确的。请查看需要时刻注意的krpano中的路径 。如果你是在vtour文件夹放声音文件,同时在tour.xml写playsound动作,那么你直接写文件名就可以了。如果是放在sound文件夹,则需要sound/文件名.mp3
  2. 将krpano安装包viewer文件夹的plugins文件夹中的soundinterface.jssoundinterface.swf两个文件拷贝到项目的plugins文件夹(1.19版本默认皮肤的plugins文件夹中包含,可以不做这一步)。请注意插件版本必须是与krpano的版本对应。
  3. tour.xmlvtourskin.xml的某个空白位置(不要放在scene标签内即可)插入以下代码(1.18以上版本写法):

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

或1.17版本及以下的写法

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

正如标题所示,我们要的就是一个持续播放的背景声音。在tour.xml找到下面的代码(1.17版本之前

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

改为(确保在vtour文件夹中有一个backgroundmusic.mp3文件)

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

如果是1.19版本或者1.18版本,可以直接加下面的代码:

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

该动作会自动在项目开始时执行。

playsound是播放普通2D声音的动作,bgsnd代表该声音的id,你可以选择其它id,例如bg,要与其它声音的id不冲突,这个id是krpano中声音标识,与文件名不是一个意思。’backgroundmusic.mp3′对应声音文件的路径,这个声音文件应与tour.xml同一目录下,0代表循环播放,填1代表只播放一次。该动作还可以写第四个参数,第四个参数是声音播放完可执行的动作。

如果你有按钮控制,则可以在该按钮的layer上添加onclick属性控制声音的暂停和播放。在这个例子中,bgsnd为该声音的id,因为我们的背景声音的id是bgsnd,所以下面填bgsnd。

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

 

krpano 1.19 pr4及以后版本

在krpano 1.19 pr4之后的默认皮肤的skin文件夹里,vtourskin.png图片已经包含了声音播放的小图标,只是在默认皮肤中没有使用到这个图标,而在全景视频案例中使用到了。我们直接打开vtourskin.xml,键盘Ctrl+F找到:

也就是在skin_btn_vr和skin_btn_fs中间插入一段skin_btn_sound的layer代码,变成:

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

 

因为图标本身与其它图标都在一个png图上,因此style是一样的,该style属性是两个style的整合。而crop的数值直接借鉴了全景视频案例中的数值,不用自己细细计算。具体crop的使用,可看移花接木(1) 。因为这个图的crop比较特殊,它又是向右对齐的,因此需要加一个ox偏移值,保证切换图标时不会错位。最后就是onclick的部分,除了之前提及的切换背景音乐的代码,还包括了crop、alpha以及ox这三个属性的数值切换。

此外,考虑到移动端的布局,因为移动端不支持全屏,因此全屏按钮是不会显示的。我们找到

改为

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

也就是保证了当有全屏按钮时,音乐按钮在全屏按钮的左侧,没有全屏按钮显示时,则替代全屏按钮的位置。

查看下页更多教程

在 “移花接木(2)- 添加背景音乐和控制声音播放的按钮” 上有 1 条评论

发表评论