javascript - reproductor m3u8 html5
maneja APlayer a través de js angulares-reproduce música dinámicamente (1)
Soy nuevo en js angulares: intento construir una reproducción de audio con Aplayer
Tarea: - 1. Reproducir música dinámicamente 2. Al hacer clic en el álbum, obtén datos json y agrégalo al reproductor
(function() {
''use strict'';
angular.module(''app'', []);
angular
.module(''app'')
.directive(''aplayer'', aplayer);
function aplayer() {
return {
restrict: ''AC'',
link: function(scope, element, attrs) {
// `element` is the angular element the directive is attached to
// APlayer need the native one
var nativeElement = element[0];
var ap1 = new APlayer({
element: nativeElement,
narrow: false,
autoplay: true,
showlrc: false,
mutex: true,
theme: ''#e6d0b2'',
preload: ''metadata'',
mode: ''circulation'',
music: {
title: attrs["playerTitle"],
author: attrs["playerAuthor"],
url: attrs["playerUrl"],
pic: attrs["playerPic"]
}
});
ap1.on(''play'', function() {
console.log(''play'');
});
ap1.on(''play'', function() {
console.log(''play play'');
});
ap1.on(''pause'', function() {
console.log(''pause'');
});
ap1.on(''canplay'', function() {
console.log(''canplay'');
});
ap1.on(''playing'', function() {
console.log(''playing'');
});
ap1.on(''ended'', function() {
console.log(''ended'');
});
ap1.on(''error'', function() {
console.log(''error'');
});
}
};
}
})();
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="aplayer"
data-player-title="Preparation"
data-player-author="Hans Zimmer/Richard Harvey"
data-player-url="http://devtest.qiniudn.com/Preparation.mp3"
data-player-pic="http://devtest.qiniudn.com/Preparation.jpg"></div>
</body>
</html>
Cómo pasar archivos de música dinámicamente a Aplayer al hacer clic en un álbum.
De acuerdo con el código fuente de Aplayer, no es posible reemplazar la pista de música o la lista de reproducción de forma dinámica. API solo expone el método setMusic que permite elegir el índice de seguimiento en la lista de reproducción de música.
Para mostrar sus álbumes, primero debe cargarlos usando un servicio que llamará a su API de pistas .
Una vez cargados, puedes insertarlos en tu directiva de jugadores y elegir el índice de la pista para jugar.
Aquí hay un fragmento de muestra con:
un servicio de música para manejar su biblioteca de música
un TrackController para cargar y mostrar su biblioteca de música
una directiva de aplayer modificada para manejar las pistas y el índice de seguimiento actual
Nota: estoy usando música gratuita de Free Music Archive para esta demostración.
(function() {
''use strict'';
angular.module(''app'', []);
angular
.module(''app'')
.factory(''musicService'', [''$timeout'', musicService])
.controller(''TracksController'', [''$scope'', ''musicService'', TracksController])
.directive(''aplayer'', aplayer);
function musicService($timeout) {
return {
loadTracks: function() {
// Simulate a 1500 ms $http api call
return $timeout(function() {
return [{
title: ''Procrastinating in the Sun'',
author: ''The Spin Wires'',
url: ''https://freemusicarchive.org/music/download/e7fee95c2d7f7b1ea8d4260850a6128842eb85a4'',
pic: ''https://freemusicarchive.org/file/images/artists/The_Spin_Wires_-_20170510154106040.jpg?width=290&height=290''
},
{
title: ''осоле'',
author: ''Kosta T'',
url: ''https://freemusicarchive.org/music/download/0e4d722be7bd7ca334970b5407b3e5654b95f7a2'',
pic: ''https://freemusicarchive.org/file/images/tracks/Track_-_2017050264944176?method=crop&width=290&height=290''
}
];
}, 1500);
}
}
}
function TracksController($scope, musicService) {
$scope.loadingTracks = true;
$scope.showPlayer = false;
musicService.loadTracks()
.then(function(tracks) {
// Once tracks are loaded, update scope
$scope.tracks = tracks;
$scope.loadingTracks = false;
});
$scope.play = function(trackIndex) {
$scope.trackIndex = trackIndex;
$scope.showPlayer = true;
}
}
function aplayer() {
return {
restrict: ''AC'',
scope: {
tracks: ''='',
trackIndex: ''=''
},
link: link
};
function link(scope, element, attrs) {
var player = new APlayer({
narrow: true,
mode: "order",
music: scope.tracks
});
// Watch for trackIndex changes
scope.$watch(
function(scope) {
// Return the "result" of the watch expression as it''s more efficient
// @see http://www.bennadel.com/blog/2852-understanding-how-to-use-scope-watch-with-controller-as-in-angularjs.htm
return scope.trackIndex;
},
function(currentIndex, previousIndex) {
// As currentIndex is an integer, if(0) equals if(false)
// But we can use a regular expression to check it''s an integer
if (//d/.test(currentIndex)) {
player.setMusic(parseInt(currentIndex));
player.play();
}
});
}
}
})();
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
<style>
ul li {
list-style-type: none;
}
ul li * {
vertical-align: middle
}
</style>
</head>
<body ng-controller="TracksController">
<div ng-if="loadingTracks">Loading tracks, please wait...</div>
<ul>
<li ng-repeat="track in tracks">
<img ng-src="{{track.pic}}" width="64" height="64">
<button ng-click="play($index)">Play</button> {{track.author}} / {{track.title}}
</li>
</ul>
<div ng-if="tracks && showPlayer">
<h2>Now playing</h2>
<div>{{tracks[trackIndex].author}} / {{tracks[trackIndex].title}}</div>
<div class="aplayer" data-tracks="tracks" data-track-index="trackIndex"></div>
</div>
</body>
</html>