angular-audio-player-html5-es6
Angular Audio Component Player - HTML5/ES6
Demo
View demo
Print Screen
Download
npm i angular-audio-player-html5-es6
Creating html
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular Audio Player Component - HTML5/ES6</title>
<link rel="stylesheet" href="src/component/style.css">
</head>
<body data-ng-controller="AppController as ctrl">
<audio-player options="ctrl.options" musics="ctrl.list"></audio-player>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="dist/bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Creating controller
angular
.module('app', ['audio.player'])
.controller('AppController', ['$scope', function ($scope) {
var ctrl = this;
ctrl.options = {
title: 'Audio Component',
autoplay: true,
loop: false,
random: true,
origin: 'anonymous'
}
ctrl.list = [
{
artist: 'Chasing Ghosts',
title: 'Fallen From Grace',
album: 'Chasing Ghosts',
value: 'musics/Chasing_Ghosts-Fallen_From_Grace.mp3'
},
{
artist: 'Sepultura',
title: 'Refuse/Resist',
album: 'Chaos A.D.',
value: 'musics/Sepultura-Refuse_Resist.mp3'
},
{
artist: 'Raimundos',
title: 'Baily Funk',
album: 'Lapadas do povo',
value: 'musics/Raimundos-Baily_Funk.mp3'
}
]
}])
Este repositório surgiu da palestra do Willian Justen no BrazilJS 2016, que mostrou por onde começar os estudos sobre audio api. Thanks Willian ;)
Changelog
Version | Description |
---|
1.0.0 | Upping Angular Audio Player Component |
2.0.0 | Config changed in component and code improvements |
2.1.0 | Added elapsed and remaining time |
Developer
npm scripts
Command | Description |
---|
npm run dev | Concat, Babelify |
npm run build | Concat, Babelify and Minify |