Question:

I am learning Ionic and want to embed an audio player. I have found this Plnkr example of <a href="http://plnkr.co/edit/C9vWoszT3FmfcATmZZ81?p=preview" rel="nofollow">Video Player</a>:

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)?

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>

{{track.artist}}

<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:

<img alt="Screenshot" class="b-lazy" data-src="https://i.stack.imgur.com/KdBlM.png" data-original="https://i.stack.imgur.com/KdBlM.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

You can find it here: <a href="https://github.com/arielfaur/ionic-audio" rel="nofollow">https://github.com/arielfaur/ionic-audio</a>

I think right thing is available there- links:

<a href="http://www.videogular.com/examples/" rel="nofollow">Dev-friendly and stable module for audio, html5-video, youtube(iframe) etc..</a>

Here is <a href="http://www.videogular.com/examples/creating-an-audio-player/" rel="nofollow">Example</a> creating Audio Player.

Here is <a href="http://codepen.io/2fdevs/pen/tguGx" rel="nofollow">codepen</a>

<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>