This module creates an audio player UI for Ionic. It is basically a facade to the cordova-media plugin and provides an Angular service and set of directives to create an audio player. The UI takes care of displaying track information, progress bar(s) and loading spinners and it keeps all in sync. The underlying service will also interface with the Media API and handle media creation/playback/pause/stop events.
It is possible to customize the look and feel by providing a template as shown in the demo below and the example project included.
NOTE: I have only tested this on :
- Android 5.1
- Android 4.1.2
- Android 4.1.2 w/ Crosswalk (much better UI performance)
iOS feedback wanted!
You need a real device to test audio playback but these demos can be used to tweak the UI. You can also run the example
projects locally with ionic serve
if you prefer.
-
[List audio tracks with a global progress bar] (http://codepen.io/arielfaur/full/JddevO/)
-
[List independent audio tracks with embedded progress bar] (http://codepen.io/arielfaur/full/rVVQKy/)
[Cordova media plugin] (https://github.com/apache/cordova-plugin-media)
ionic plugin add org.apache.cordova.media
bower install ionic-audio
There's a sample Ionic project in the folder example-audio
. The project contains not platforms, so you must add
one and make a build if you want to test it on your device.
Keep in mind that the module depends on a Cordova plugin so the module won't run locally with ionic serve
.
However, you can still run the project locally to tune the UI before deploying to the device.
<script src="dist/ion-audio.js"></script>
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionic-audio'])
<ion-view view-title="Music">
<ion-content>
<ion-audio-track track="track">
<div class="list list-inset">
<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"></ion-spinner>
</ion-audio-controls>
</div>
<div class="item">
<ion-audio-progress-bar display-time></ion-audio-progress-bar>
</div>
</div>
</ion-audio-track>
</ion-content>
</ion-view>
Creates an audio track from a JSON object passed as parameter using the track
attribute. The player UI is defined inside the body of
ion-audio-track
. Supports multiple instances per view, each one being completely
independent.
<ion-audio-track track="myTrack">
...
</ion-audio-track>
Then in your controller:
$scope.myTrack = {
url: 'https://www.example.com/my_song.mp3',
artist: 'Somebody',
title: 'Song name',
art: 'img/album_art.jpg'
}
Container for ion-audio-play
and ion-spinner
directives. The spinner is automatically hidden/shown when needed.
Displays play/pause/loading status. Simply apply this attribute to an a
or button
element. It updates the UI accordingly and shows a spinner
while the track is loading.
Additionally, the attributes text-play
and text-pause
may be used to include a label for each status.
<a class="button button-icon icon" ion-audio-play></a>
<button class="button icon-left" ion-audio-play text-play="Play" text-pause="Pause"></button>
Shows a progress bar using Ionic's range control. It also displays the track duration and progress update if
the display-time
attribute is present.
<ion-audio-progress-bar display-time></ion-audio-progress-bar>
Sample use case: tracks listed with an embedded progress bar.
If a ion-audio-progress-bar
is placed outside the scope of ion-audio-track
, it will automatically behave as a standalone bar keeping in sync with the track list. Add a display-info
attribute to show the current playing track.
<ion-audio-progress-bar display-time display-info></ion-audio-progress-bar>
Sample use case: tracks listed with a global progress bar.
- Test on iOS
- Implement playlist functionality
Implement seek-to functionality using the sliderImplement customization of progress bar and default player icons - now hardcoded- Replace Ionic range control with SVG to show track progress instead (maybe?)