在Ionic（使用科尔多瓦的混合应用程序开发）中播放远程Url的音频

我是Ionic和Cordova的新手。我正在创建一个基本的应用程序，其中我将拥有一些我希望用户能够播放的音频文件的URL。这些URL是从Web服务中获取的。请帮助我这个查询。谢谢。在Ionic（使用科尔多瓦的混合应用程序开发）中播放远程Url的音频

尝试您的答案后编辑：

以下是Web服务响应。有多个事件。每个事件有两个不同的音频，我想在一个节中播放。

{ “消息”： “成功”， “标题”： “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“}}}

来源

2017-05-05 Karuna Darekar

这里是一个示例。 不要忘记安装科尔多瓦插件添加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>

来源

2017-05-05 11:28:52 Edison

感谢。我试过你的解决方案。但音频文件没有播放。它始终显示无限加载的行为。什么地方出了错？ –

你安装了'cordova plugin add org.apache.cordova.media' – Edison

是的。我使用Visual Studio，这就是为什么我在Visual Studio中安装这个插件。 –

在Ionic（使用科尔多瓦的混合应用程序开发）中播放远程Url的音频

回答

相关问题