Ionic Cordova 原生触控音效答案

【问题标题】：Ionic Cordova native touch soundIonic Cordova 原生触控音效
【发布时间】：2017-02-27 13:27:46
【问题描述】：

我是使用 ionic 1 和 angularJs 进行混合应用程序开发的新手。我已将该应用程序部署到我的三星设备 (android)。我发现当我触摸任何元素（例如：按钮）时，它没有任何声音效果。

如何像原生应用一样启用触控声音？

我也访问过这篇文章http://gonehybrid.com/how-to-add-sound-effects-to-your-ionic-app-with-native-audio/，但这不是我想要实现的。它教授如何在应用程序中启用和加载音频。但是，我想拥有手机的原生触摸声音

如果其他地方存在类似问题，我深表歉意，我已经搜索了很多网站，但找不到答案

我也尝试了https://github.com/MatiMenich/cordova-plugin-nativeClickSound，但没有成功。请在下面找到我的 index.html 和 controller.js 的代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script> 

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script> 

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">

    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
  </body>
</html>

controller.js

.controller('SoundController', function($ionicPlatform, $scope, $timeout){
    var clickyClasses = ['sound-click', 'button']; 
    nativeclick.watch(clickyClasses);
    $scope.click = function() {
      nativeclick.trigger();
    };
})

【问题讨论】：

标签： android angularjs cordova ionic-framework

【解决方案1】：

你可以试试https://github.com/MatiMenich/cordova-plugin-nativeClickSound。它在麻省理工学院许可下。希望对你有帮助

这会将原生声音应用到所有按钮和单击时带有 href 的“a”标签。

var clickyClasses = ['button', 'a']; 
nativeclick.watch(clickyClasses);

【讨论】：

您好，我已经安装了插件。我在我的控制器中尝试过同样的方法，但它返回错误“nativeclick”未定义
您好，大多数 ngCordova 插件无法在 Web 浏览器中运行，因为它们使用本机设备代码。在模拟器或真机上试试吧
这是我的控制器代码.. 我必须在函数中添加任何参数吗？ .controller('SoundController', function($ionicPlatform, $scope, $timeout){ var clickyClasses = ['sound-click', 'button']; nativeclick.watch(clickyClasses); $scope.click = function() { nativeclick.trigger(); }; });
不，你不需要在控制器中注入任何东西。您是否尝试在真实设备上运行它？安卓还是ios？
我试图在android中运行它，它得到了同样的错误nativeclick is not defined。我错过了什么吗？

【解决方案2】：

安装插件'cordova plugin add cordova-plugin-nativeclicksound'

在 app.js 中使用此代码

.controller('MyController',function($scope,
$cordovaNativeAudio) {   

    $scope.sound = function() {
            nativeclick.trigger();
     };
});

你可以在任何你想要原生声音的地方使用 sound() 函数，例如按钮

<button ng-click="sound()">native sound</button>

在设备、网络浏览器中测试它通过错误。

【讨论】：