web-services - 在Ionic中播放来自远程URL的音频(使用cordova进行混合应用开发)

标签 web-services cordova audio ionic-framework

我是Ionic和Cordova的新手。我正在创建一个基本的应用程序,其中将包含一些我希望用户能够播放的音频文件的URL。
这些URL是从Web服务获取的。请帮我这个查询。谢谢。

尝试回答后进行编辑:

以下是Web服务响应。有多个事件,每个事件都有一个我要播放的两个不同的音频。

{
“message”:“成功”,
“title”:“Panchkavani”,
“error_msg”:“”,
“结果”:[
{“events_id”:空,
“图片”:””,
“title”:“test pachkavani”,
“stanak”:“https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3”,
“mandir”:“https://ionic-audio.s3.amazonaws.com/Roxane.mp3”,“date_added”:“2017年5月13日,星期六”,“date_time”:“01:49 AM”}]}

最佳答案

这是一个样本。不要忘记安装 cordova插件添加org.apache.cordova.media 以获取更多https://www.thepolyglotdeveloper.com/2014/11/playing-audio-android-ios-ionicframework-app/.this示例slso仅在添加媒体插件时有效

angular.module('ionicApp', ['ionic', 'ionic-audio'])

.controller('MyCtrl', function($scope) {
 
  $scope.tracks = [
        {
            url: 'https://ionic-audio.s3.amazonaws.com/Message%20in%20a%20bottle.mp3',
            artist: 'The Police',
            title: 'Message in a bottle',
            art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
        },
        {
            url: 'https://ionic-audio.s3.amazonaws.com/Roxane.mp3',
            artist: 'The Police',
            title: 'Roxane',
            art: 'https://ionic-audio.s3.amazonaws.com/The_Police_Greatest_Hits.jpg'
        }
    ];
});
<html ng-app="ionicApp">

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

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="https://rawgit.com/arielfaur/ionic-audio/master/dist/ion-audio.js"></script>
</head>

<body ng-controller="MyCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Audio tracks with embedded bar</h1>
  </ion-header-bar>

  <ion-content>
    <div class="list">
      <ion-audio-track ng-repeat="track in tracks" track="track">
        <div class="card">
          <div class="item item-thumbnail-left">
            <img src="{{track.art}}">

            <h2>{{track.title}}</h2>

            <p>{{track.artist}}</p>
            <ion-audio-controls>
              <a class="button button-icon icon" ion-audio-play></a>
              <ion-spinner icon="ios" style="position: relative; top: 8px; left: 4px"></ion-spinner>
            </ion-audio-controls>
          </div>
          <div class="item item-divider">
            <ion-audio-progress-bar display-time></ion-audio-progress-bar>
          </div>
        </div>
      </ion-audio-track>
    </div>
  </ion-content>

</body>

</html>

关于web-services - 在Ionic中播放来自远程URL的音频(使用cordova进行混合应用开发),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43803583/

相关文章:

ruby-on-rails - 如何在客户端(浏览器、iPhone、Android)之间共享代码

android - 将 Phonegap 的各个部分混合到 native 应用程序中

javascript - 音频结束后隐藏按钮

java - 如何接受 byte[] 作为对 POST 的响应

javascript - CORS 问题 - 从 Backbone JS 调用 Web 服务

.net - 查看原始 XML 请求

c++ - 如何在 iOS 中添加带有 PCM 数据/缓冲区的可播放(例如 wav、wmv) header ?

java - Keytool 创建受信任的自签名证书

android - $cordovaGeolocation.getCurrentPosition 上的 "Illegal Access"

iphone - kAudioSessionCategory_MediaPlayback是否在铃声关闭时静音?