目录

  • 背景音乐
    • 使用AudioSource组件
      • ①添加组件
      • ②脚本控制
    • 直接脚本控制
      • ①声明
      • ②播放背景音乐(playMusic)
  • 音效
    • 直接脚本控制
      • ①声明
      • ②播放
      • ③停止
  • 注意

背景音乐

使用AudioSource组件

①添加组件

首先选一个层级,添加组件——其他组件——AudioSource

组件详情如下,分别是:

名字 用处
clip 拖进去一个音乐文件
Mute 是否静音
Volume 音量,0–1之间
Loop 是否循环
Play On Load 是否自动播放
Preload 是否预加载

如果勾选上Play On Load,这时鼠标放在cocos软件右上角的域名上,手机扫描二维码预览,点击一下屏幕就会听到音乐了

②脚本控制

不勾选Play On Load的话,在脚本文件里设置音乐的播放和暂停
在js的properties里面写:

bg_music:{default:null,type: cc.AudioSource
}

然后再onload里面写:

this.bg_music.play();

也是和勾选Play On Load一样的效果

除了play,还可以用pause暂停等

直接脚本控制

①声明
bg_music:{default:null,type: cc.AudioClip
}
②播放背景音乐(playMusic)
let audioId_bg = cc.audioEngine.playMusic(this.bg_music, true);
cc.audioEngine.setVolume(audioId_bg, 1);//设置声音大小

代码解析:

代码 用处
audioId_bg 是这个音效的id,暂停或停止的时候都需要它
playMusic 是用来播放背景音乐的
bg_music 是声明中绑定了音乐文件的
true 是循环,如果不想循环请用false
setVolume 是设置音量
1 是音量最大的,数值在0–1之间

音效

直接脚本控制

①声明
engine_music:{default:null,type: cc.AudioClip
}
②播放

此时假设点击mask_exam时播放音效

var that = this;
this.mask_exam.on('touchstart',function(){that.engine_music_id = cc.audioEngine.playEffect(that.engine_music, false);
})

代码解析:

代码 用处
that.engine_music_id 是这个音效的id,暂停或停止的时候都需要它
playEffect 是用来播放音效的
engine_music 是声明中绑定了音效文件的
false 是不循环,如果循环请用true

同样的,此时这个音效也可以用cc.audioEngine.setVolume(that.engine_music_id, 0.1);来设置音量

③停止

如果需要停止此音效,可以用:

cc.audioEngine.stopEffect(that.engine_music_id);

注意

1、如果不先点击一下cocos生成的canvas标签(点其他h5页面没用),
苹果手机音乐是不会播放出声音的,建议在最上面做一个蒙版让用户点击

2、点击最好圈定一个范围,因为滑动也会执行点击事件,但不会播放音乐

3、如果需要将cocos和h5页面合在一起,不建议在h5里写audio标签播放音乐,那样的话cocos的音乐播出来是全损音质,轻快音乐秒变惊悚


cocos笔记链接:
cocos creator学习(一)页面+动画
cocos creator学习(二)js绑定动画
cocos creator学习(三)预制节点
cocos creator学习(四)全局变量+类之间的函数调用
cocos creator学习(五)定时器
cocos creator学习(六)组件Mask(超出部分隐藏)
cocos creator学习(七)音乐
cocos creator学习(八)自动图集+构建发布h5
cocos creator学习(九)构建后更改图片和层级设置
cocos creator学习(十)cocos自带扩展插件-压缩

cocos creator学习(七)音乐相关推荐

  1. Cocos Creator学习目录

    目录 安装和启动 文件结构 编辑器基础 基本概念 (场景树 节点 坐标 组件 ) Cocos Creator 脚本简介 Cocos Creator调试 节点 cc.Node 组件开发cc.Compon ...

  2. Cocos creator 学习笔记(2)

    7.ts  跳转场景 director.loadScene("game"); 8  ts--在ts文件声明变量时,前面加上注解   @property,此变量量就可以在cocos ...

  3. cocos creator 学习随笔 day03 节点和组件属性

    目录 节点本身属性 控件属性 场景 空节点 3D对象 2D对象 UI组件 光线 特效 摄像机 地形 节点本身属性 第一栏为节点名,可修改,前面得勾,是表示是否使用该节点,去掉代表隐藏该节点,但是该节点 ...

  4. cocos creator学习(十四) websocket、onfire

    1.使用websocket替换原本无法在原生平台使用的socket. 2.事件分发开源库onfire的使用 3.一些注意事项 1.使用websocket替换原本无法在原生平台使用的socket. 其实 ...

  5. cocos creator 学习第一篇

    文章目录 游戏引擎: cocos2d cocos creator 版本: 编辑器 游戏引擎: unity 编程语言主要为c# 早期cocos2d 等用c++ 或者lua cocos creator 编 ...

  6. cocos creator学习个人踩坑(3)--关于项目调试在一些安卓机上FPS低

    一些cocos creator遇到的小问题 问题 在做点消游戏项目的时候,在一些旧的安卓机上测试时消除特效显示会有明显的卡顿,火箭消除会有残留,FPS下降明显 原因 通过真机调试,发现日志输出会明显导 ...

  7. 使用 Cocos Creator 开发动感音乐游戏!

    摘要 音乐干听多没劲,来点可视化效果让音乐"动"起来!底部源码分享! 正文 说明 在浏览器端 AudioContext 是一个专门用于音频处理的接口,工作原理是将 AudioCon ...

  8. cocos creator学习:PageView 控件的使用

    PageView: 页面视图组件,实现分页功能 PageViewIndicator:  页面视图每页标记组件,常用与PageView配合使用 1.介绍 当我们直接使用ccc提供的控件时,节点如下图,其 ...

  9. 这么全的 Cocos Creator 3.x 学习资源,竟然是免费的!

    目前 Cocos Creator 3.0 越来越成熟,使用 Cocos Creator 做游戏的小伙伴越来越多.我们在这里整理了现阶段最全面.最优质的 Cocos Creator 3.x 的学习资料, ...

最新文章

  1. 如何用python创建一个下载网站-用Python写一个简单的网页下载
  2. 地球环绕 html5,玩转html5(五)---月球绕着地球转,地球绕着太阳转
  3. nssl1319-埃雷萨拉斯寻宝【SPFA,建图】
  4. 关于深度学习框架Hamaa与Python API文档生成工具Sophon
  5. Scala实现Mapreduce程序4-----数据去重
  6. SpringMVC-狂神笔记
  7. 图像处理专业术语中英文对照(不断补充中)
  8. 微信开发者账号APPID过久不用被冻结解决方案
  9. 批处理文件rd \s\q **是什么意思?
  10. Python 入门学习路线
  11. VMware导入ova/ovf虚拟机文件
  12. 重庆生小孩可以领那些钱
  13. 悠悠古舟渡,浅浅时光去
  14. 华为手机怎么录屏?十分简单,轻松学会
  15. Excel黑科技——含合并单元格的同行求和并下拉自动填充
  16. Visio科学图形包免费下载
  17. git修改密码,IDE修改git密码
  18. 〖全域运营实战白宝书 - 高转化文案速成篇③〗- 高打开率标题型文案的10大黄金法则
  19. float类型为什么有6位有效数字
  20. DNS的域名的解析解决办法(openDNS)

热门文章

  1. oracle实验记录 (ROW 压缩,迁移,链接)
  2. velocity官网介绍
  3. vue项目使用百度商桥实现在线聊天功能
  4. 如何进入Microsoft 安全公告
  5. GIS、遥感、水文、地理常用数据介绍及下载网址(2),补充~
  6. 小说源码seo利于优化模板两套带采集规则
  7. 烘干机和新风机用过才知道的缺点
  8. 04.android studio 新建一个项目
  9. 智能井盖-城市窨井盖监测设备-井盖开关监测终端-旭华智能
  10. 数学专业C语言考题,2020年大连理工大学计算数学考研真题试卷及试题答案,C语言考研试题下载...