Audio player for Ionic

Question

I am learning Ionic and want to embed an audio player. I have found this Plnkr example of Video Player:

    angular.module('app',[])

.directive('youtubeIframe', ['$timeout', function ($timeout, $sce ) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $timeout( function () {
                var temp1 = '<iframe width="400px" height="200px" src="http://www.youtube.com/embed/';
                var temp2 = '?&autoplay=0&autohide=1&fs=1&cc_load_policy=1&loop=0&rel=0&modestbranding=1&&hd=1&playsinline=0&showinfo=0&theme=light" frameborder="1" allowfullscreen></iframe>';
                var finalvar = temp1 + attrs.youtubeIframe + temp2 ;
                console.log('Finalvar is: ' + finalvar); //just to check if url is ok
                element.prepend( finalvar );
            }, 150);
            // The timeout is to give enough time for the Dom to be built and checked for its structure, so that we can manipulate it.
        }
    };
}])



.controller('VideoCtrl', function($scope) {

    $scope.angularvideos = [
      { 
        name: 'Angular on the go: Using Angular to power Mobile Apps', 
        youtubeId: 'xOAG7Ab_Oz0',
        publishdate: 'Dec 2013'
      },
      { 
        name: 'Crafting the Perfect AngularJS Model and Making it Real Time', 
        youtubeId: 'lHbWRFpbma4',
        publishdate: 'April 2014'
      },
      { 
        name: 'AngularJS & D3: Directives for Visualizations', 
        youtubeId: 'aqHBLS_6gF8',
        publishdate: 'Jan 2014'
      },
      { 
        name: 'The Thick Front End', 
        youtubeId: 'hv2NEW0uC1o',
        publishdate: 'Nov 2013'
      }
    ];
})

Is there a similar example for an audio player within iframe for a mobile App (Android for the time being, but later on iOS as well)?

score 3 · Answer 1 · answered May 03 '15 at 19:34

I released a Ionic module that plays audio natively (tested it on Android so far) using the Cordova Media plugin.

You define a Ionic view:

<ion-view view-title="Music">
  <ion-content>
      <ion-audio-track track="myTrack">
          <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-play></ion-audio-play>
              </div>
              <div class="item">
                <ion-audio-progress-bar display-time></ion-audio-progress-bar>
              </div>
          </div>
      </ion-audio-track>
  </ion-content>
</ion-view>

And your scope:

$scope.myTrack = {
    url: 'https://www.example.com/my_song.mp3',
    artist: 'Somebody',
    title: 'Song name',
    art: 'img/album_art.jpg'
}

Looks like this:

Screenshot

You can find it here: https://github.com/arielfaur/ionic-audio

Will it work in browser? I have checked in browser but working — Sariban D'Cl, Aug 03 '15 at 11:50
No, you need the Cordova Media plugin installed on your device. I am working on a fallback to use Web Audio API on the browser, but it isn't ready yet! — arielf, Aug 03 '15 at 15:01
Great!! It's worked fine in emulator. It would be great if you can add `volume`, `next/prev track` options. — Sariban D'Cl, Aug 05 '15 at 10:08

score 2 · Answer 2 · answered Feb 15 '15 at 08:17

I think right thing is available there- links:

Dev-friendly and stable module for audio, html5-video, youtube(iframe) etc..

Here is Example creating Audio Player.

Here is codepen

    <videogular vg-theme="controller.config.theme.url" class="videogular-container audio">
    <vg-media vg-src="controller.config.sources"></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
        </vg-volume>
    </vg-controls>
</videogular>

I actually started with videogular and ran into problems. Even the above date filter falls apart if I replace mm:ss with hh:mm:ss due to time zone issues. — AnR, Feb 15 '15 at 09:44

Audio player for Ionic

2 Answers2

Linked