- 离子基础教程
- 离子 - 主页
- 离子 - 概述
- Ionic - 环境设置
- Ionic CSS 组件
- 离子 - 颜色
- 离子 - 内容
- 离子 - 标头
- 离子 - 页脚
- 离子 - 按钮
- Ionic - 列表
- 离子 - 卡片
- 离子 - 形式
- 离子 - 切换
- Ionic - 复选框
- Ionic - 单选按钮
- 离子 - 范围
- 离子 - 选择
- Ionic - 选项卡
- 离子 - 网格
- 离子 - 图标
- 离子 - 填充
- Ionic JavaScript 组件
- Ionic - JS 操作表
- Ionic - JS 背景
- Ionic - JS 内容
- Ionic - JS 表单
- Ionic - JS 事件
- Ionic - JS 标头
- Ionic - JS 页脚
- Ionic - JS 键盘
- Ionic - JS 列表
- Ionic - JS 加载
- Ionic - JS 模态
- Ionic - JS 导航
- Ionic - JS 弹出窗口
- Ionic - JS 弹出窗口
- Ionic - JS 滚动
- Ionic - JS 侧边菜单
- Ionic - JS 幻灯片盒
- Ionic - JS 选项卡
- 离子先进概念
- Ionic - Cordova 集成
- 离子 - AdMob
- 离子 - 相机
- 离子 - Facebook
- Ionic - 在应用程序浏览器中
- Ionic - 原生音频
- 离子 - 地理定位
- 离子 - 媒体
- Ionic - 启动画面
- 离子有用资源
- 离子 - 快速指南
- 离子 - 有用的资源
- 离子 - 讨论
Ionic - Cordova 原生音频
该插件用于向 Ionic 应用程序添加本机音频。
使用本机音频
为了能够使用这个插件,我们首先需要安装它。打开命令提示符窗口并添加 Cordova 插件。
C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio
在开始使用此插件之前,我们需要音频文件。为简单起见,我们将click.mp3文件保存在js文件夹中,但您可以将其放置在任何您想要的位置。
下一步是预加载音频文件。有两个选项可用,它们是 -
preloadSimple - 用于将播放一次的简单声音。
preloadComplex - 用于将作为循环声音或背景音频播放的声音。
将以下代码添加到控制器以预加载音频文件。我们需要确保 Ionic 平台已加载,然后才能预加载音频文件。
控制器代码
$ionicPlatform.ready(function() { $cordovaNativeAudio .preloadSimple('click', 'js/click.mp3') .then(function (msg) { console.log(msg); }, function (error) { console.log(error); }); $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1) .then(function (msg) { console.log(msg); }, function (error) { console.error(error); }); });
在同一个控制器中,我们将添加用于播放音频的代码。我们的$timeout函数将在五秒后停止并卸载循环音频。
$scope.playAudio = function () { $cordovaNativeAudio.play('click'); }; $scope.loopAudio = function () { $cordovaNativeAudio.loop('click'); $timeout(function () { $cordovaNativeAudio.stop('click'); $cordovaNativeAudio.unload('click'); }, 5000); }
我们需要的最后一件事是创建用于播放和循环音频的按钮。
HTML 代码
<button class = "button" ng-click = "playAudio()">PLAY</button> <button class = "button" ng-click = "loopAudio()">LOOP</button>
当我们点击播放按钮时,我们会听到一次声音,当我们点击循环按钮时,声音会循环五秒钟,然后停止。该插件仅适用于模拟器或移动设备。