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

更新于 2024.4.19 krpano 1.21.2

本案例官方下载包路径

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

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

 

在线演示

 

播放背景声音

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

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

 

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

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

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

 

或1.17版本及以下的写法(不建议使用这个版本)

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

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

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

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

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

如果是1.21、1.20、1.191.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(1.21版本),键盘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这三个属性的数值切换。

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

改为

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

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

 

krpano 1.19 pr3以下版本加声音按钮

我们把案例包中的soundonoff.png图片复制到vtour文件夹中。然后在tour.xml内加入下面代码(scene标签之外):

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

这样我们在屏幕的右上角就会有一个声音控制按钮,当我们点击的时候,就会播放或暂停声音同时切换图标状态。在手机端时,图标会比在电脑端要大。

下面我们来看如何把这个按钮整合到官方默认皮肤中,首先将默认皮肤中的skin文件夹中的vtourskin.png以及刚才的soundonoff.png拖到photoshop中。

因为soundonoff.png是黑色的,我们需要进行一些处理,将它变为白色,例如饱和度和明度的调整,锐度的调整等等。

QQ图片20151129102209

 

我们需要调整vtourskin.png的画布,如下图。

QQ图片20151129101752

为了便于观看效果,我加了一个蓝色的背景层。

QQ图片20151129101842

将声音按钮放到对应的位置上。去掉蓝色背景层后,保存为原来的png图片。路径不变。

QQ图片20151129103221

图片下载(仅供参考 1.18使用)

链接:http://pan.baidu.com/s/1mg2bcfu 密码:1bvs

图片下载(仅供参考 1.19 pr3使用)

链接:http://pan.baidu.com/s/1c1exQrm 密码:89l2

打开skin文件夹的vtourskin.xml,找到

在它的下面加入

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

同时,我们还要考虑移动端的展示。找到下面的代码:

这一大段代码是控制默认皮肤在手机端的外观。<krpano devices=”mobile”> 这个代码使的其中的元素属性只在手机端生效。我们能看到很多skin_btn前缀的layer,实际上它们在vtourskin.xml的前面部分都出现了,现在需要再定义一下其在手机端的大小和位置(注意,这是1.18的皮肤,1.19写法已经不一样)。

所以我们在

在这两行代码之间插入(实际上不一定是在这两行代码之间,只是为了从代码可读性上考虑)变成了

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

我们将skin_btn_sound加进来了,如果我们不加的话,我们会发现声音按钮会很小且位置不太对,因为它的定义遵循了之前我们加入的代码。因此我们仿照其它手机端的按钮加入scale为1的属性,同时align设置为对齐,y为0。注意我们没有直接写x,因为我们发现还有一个gyro的按钮是不确定,也就是陀螺仪按钮可能出现可能不出现,因此我们还需要根据陀螺仪按钮是否出现来确定声音按钮的位置,于是我们在onloaded加了个判断。

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

发表评论