我正在学习Ionic,想要嵌入一个音频播放器。我找到了Video Player的这个Plnkr示例:
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'
}
];
})
移动应用程序的iframe中的音频播放器是否有类似的示例(暂时是Android,但后来又出现在iOS上)?
答案 0 :(得分:3)
我发布了一个使用Cordova Media插件本地播放音频的Ionic模块(目前在Android上测试过)。
您可以定义离子视图:
<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>
你的范围:
$scope.myTrack = {
url: 'https://www.example.com/my_song.mp3',
artist: 'Somebody',
title: 'Song name',
art: 'img/album_art.jpg'
}
看起来像这样:
您可以在此处找到它:https://github.com/arielfaur/ionic-audio
答案 1 :(得分:2)
我认为正确的事情可以在那里找到 - 链接:
Dev-friendly and stable module for audio, html5-video, youtube(iframe) etc..
这是Example创建音频播放器。
这是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>