我是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/