A. Lib using
soundmanager2
B. step by step
1. download lib
soundmanager2
http://www.schillmania.com/projects/soundmanager2/
2. create project
- ionic start myApp blank --v2
- create folder public add file
soundmanager2.js to folder
- Script using
import { Injectable, ViewChild } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Categorys, Playlists } from '../models/user';
import { Observable } from 'rxjs/Rx';
import { soundManager } from '../public/js/soundmanager2';
@Injectable()
export class MusicPlayerService {
currentTrack;
isPlaying: boolean;
trackProgress = 0;
trackList = [];
currentPosition;
IdSongplay: any;
constructor(public http: Http) {
this.http = http;
this.init();
}
init() {
this.initSoundManager();
}
playTrack(track) {
if (typeof this.getCurrentTrack() !== 'undefined') this.stop();
var _this = this;
this.setCurrentTrack(track);
var foo = soundManager.createSound({
id: track.id,
url: track.src,
multiShot: false
});
foo.options.whileplaying = function () {
this.IdSongplay = this.id;
//console.log("ID:" + this.id);
/**time lap */
var min = (this.durationEstimate / 1000 / 60) << 0,
sec = Math.round((this.durationEstimate / 1000) % 60);
var sect = (sec < 10) ? '0' + sec.toString() : sec.toString();
var mint = (min < 10) ? '0' + min.toString() : min.toString();
var timeplay = "<sm> [" + mint + ':' + sect + "]</sm>";
/* Play Model*/
var titlesong = document.getElementById('nameSong');
if (titlesong != null)
titlesong.innerHTML = track.title + timeplay;
var titlesong1 = document.getElementById('nameSong1');
if (titlesong1 != null)
titlesong1.innerHTML = track.title + timeplay;
var x = document.getElementById('progBar');
if (x != null)
x.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
var x1 = document.getElementById('progBarplay');
if (x1 != null)
x1.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
/*Play List music */
var playfooter = document.getElementById('playfooter');
if (playfooter != null)
playfooter.setAttribute('style', 'display:block;');
var titlesongf = document.getElementById('nameSongf');
if (titlesongf != null)
titlesongf.innerHTML = track.title + timeplay;
var titlesongf1 = document.getElementById('nameSongf1');
if (titlesongf1 != null)
titlesongf1.innerHTML = track.title + timeplay;
var xf = document.getElementById('progBarf');
if (xf != null)
xf.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
var x1f = document.getElementById('progBarf');
if (x1f != null)
x1f.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
/*Play list catalog */
var playfooterlc = document.getElementById('playfootercat');
if (playfooterlc != null)
playfooterlc.setAttribute('style', 'display:block;');
var titlesonglc = document.getElementById('nameSonglc');
if (titlesonglc != null)
titlesonglc.innerHTML = track.title + timeplay;
var titlesonglc1 = document.getElementById('nameSonglc1');
if (titlesonglc1 != null)
titlesonglc1.innerHTML = track.title + timeplay;
var xlc = document.getElementById('progBarlc');
if (xlc != null)
xlc.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
var x1lc = document.getElementById('progBarlc');
if (x1lc != null)
x1lc.setAttribute('style', 'width:' + ((this.position / this.duration) * 100) + '%');
/*button icon */
/* if (this.isPlaying) {
//play
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xf.setAttribute('ng-reflect-name', 'ios-play-outline');
xf.setAttribute('aria-label', 'ios-play-outline');
}
//List play
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfp.setAttribute('ng-reflect-name', 'ios-play-outline');
xfp.setAttribute('aria-label', 'ios-play-outline');
}
//List cate
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfc.setAttribute('ng-reflect-name', 'ios-play-outline');
xfc.setAttribute('aria-label', 'ios-play-outline');
}
}
else {
//play
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xf.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xf.setAttribute('aria-label', 'pause outline');
}
//List play
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfp.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfp.setAttribute('aria-label', 'pause outline');
}
//List cate
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfc.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfc.setAttribute('aria-label', 'pause outline');
}
}*/
}
foo.options.onfinish = function () {
/* Play Model*/
var x = document.getElementById('progBar');
if (x != null)
x.setAttribute('style', 'width:' + 0 + '%');
/*Play List music */
var x1f = document.getElementById('progBarf');
if (x1f != null)
x1f.setAttribute('style', 'width:' + 0 + '%');
/*Play List catalog */
var x1lc = document.getElementById('progBarlc');
if (x1lc != null)
x1lc.setAttribute('style', 'width:' + 0 + '%');
console.log("onfinish");
_this.nextTrack();
}
foo.play();
this.setPlayingStatus(true);
}
play() {
soundManager.play(this.getCurrentTrack().id);
this.setPlayingStatus(true);
}
pause() {
soundManager.pause(this.getCurrentTrack().id);
this.setPlayingStatus(false);
}
stop() {
this.pause();
this.resetProgress();
soundManager.stopAll();
soundManager.unload(this.getCurrentTrack());
soundManager.destroySound(this.getCurrentTrack().id);
}
resetProgress() {
this.trackProgress = 0;
}
togglePlay() {
if (this.isPlaying) {
this.pause();
/*play*/
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xf.setAttribute('ng-reflect-name', 'ios-play-outline');
xf.setAttribute('aria-label', 'ios-play-outline');
}
/*List play*/
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfp.setAttribute('ng-reflect-name', 'ios-play-outline');
xfp.setAttribute('aria-label', 'ios-play-outline');
}
/*List cate*/
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfc.setAttribute('ng-reflect-name', 'ios-play-outline');
xfc.setAttribute('aria-label', 'ios-play-outline');
}
}
else {
this.play();
/*play*/
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xf.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xf.setAttribute('aria-label', 'pause outline');
}
/*List play*/
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfp.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfp.setAttribute('aria-label', 'pause outline');
}
/*List cate*/
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfc.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfc.setAttribute('aria-label', 'pause outline');
}
}
}
checkPlay() {
console.log("check play:" + this.isPlaying);
if (!this.isPlaying) {
console.log("check play change icon");
/*play*/
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xf.setAttribute('ng-reflect-name', 'ios-play-outline');
xf.setAttribute('aria-label', 'ios-play-outline');
}
/*List play*/
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfp.setAttribute('ng-reflect-name', 'ios-play-outline');
xfp.setAttribute('aria-label', 'ios-play-outline');
}
/*List cate*/
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ios-play-outline ion-ios-play-outline');
xfc.setAttribute('ng-reflect-name', 'ios-play-outline');
xfc.setAttribute('aria-label', 'ios-play-outline');
}
}
else {
/*play*/
var xf = document.getElementById('Idconplay');
if (xf != null) {
xf.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xf.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xf.setAttribute('aria-label', 'pause outline');
}
/*List play*/
var xfp = document.getElementById('Idconplaylist');
if (xfp != null) {
xfp.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfp.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfp.setAttribute('aria-label', 'pause outline');
}
/*List cate*/
var xfc = document.getElementById('Iconplaylistlc');
if (xfc != null) {
xfc.setAttribute('class', 'icon icon-md ion-ios-pause-outline');
xfc.setAttribute('ng-reflect-name', 'ion-ios-pause-outline');
xfc.setAttribute('aria-label', 'pause outline');
}
}
}
setPlayingStatus(playing: boolean) {
this.isPlaying = playing;
}
getPlayingStatus(): boolean {
return this.isPlaying;
}
setCurrentTrack(track) {
this.currentTrack = track;
}
getCurrentTrack() {
return this.currentTrack;
}
getCurrentPosition() {
return this.currentPosition;
}
getdurationEstimate() {
if (typeof this.getCurrentTrack() === 'undefined') return 0;
var sound = soundManager.getSoundById(this.getCurrentTrack().id);
return sound.durationEstimate;
}
setCurrentPosition(position) {
this.currentPosition = position;
}
getDuration(position) {
if (typeof this.getCurrentTrack() === 'undefined') return 0;
var sound = soundManager.getSoundById(this.getCurrentTrack().id);
return sound.durationEstimate;
}
nextTrack() {
if (typeof this.getCurrentTrack() === 'undefined'
|| this.trackList.length < 1)
return;
this.stop();
console.log(this.trackList.indexOf(this.getCurrentTrack()));
var nextPosition = this.trackList.indexOf(this.getCurrentTrack()) + 1;
if (this.trackList.length > nextPosition) {
this.playTrack(this.trackList[nextPosition]);
} else {
this.playTrack(this.trackList[0]);
}
}
prevTrack() {
if (typeof this.getCurrentTrack() === 'undefined'
|| this.trackList.length < 1)
return;
this.stop();
//console.log(this.trackList.indexOf(this.getCurrentTrack()));
var prevPosition = this.trackList.indexOf(this.getCurrentTrack()) - 1;
if (prevPosition > 0) {
this.playTrack(this.trackList[prevPosition]);
} else {
this.playTrack(this.trackList[0]);
}
}
addToPlaylist(track) {
this.trackList.push(track);
}
clearPlaylist() {
this.trackList = [];
}
initSoundManager() {
var _this = this;
soundManager.setup({
preferFlash: false, // prefer 100% HTML5 mode, where both supported
debugMode: false, // enable debugging output ($log.debug() with HTML fallback)
useHTML5Audio: true,
onready: function () {
//$log.debug('sound manager ready!');
},
ontimeout: function () {
alert('SM2 failed to start. Flash missing, blocked or security error?');
alert('The status is ' + this.status.success + ', the error type is ' + this.status.error.type);
},
defaultOptions: {
// set global default volume for all sound objects
autoLoad: true, // enable automatic loading (otherwise .load() will call with .play())
autoPlay: false, // enable playing of file ASAP (much faster if "stream" is true)
from: null, // position to start playback within a sound (msec), see demo
loops: 1, // number of times to play the sound. Related: looping (API demo)
multiShot: false, // let sounds "restart" or "chorus" when played multiple times..
multiShotEvents: true, // allow events (onfinish()) to fire for each shot, if supported.
onid3: null, // callback function for "ID3 data is added/available"
// onload: true, // callback function for "load finished"
onstop: null, // callback for "user stop"
onfailure: function () {
_this.nextTrack();
}, // callback function for when playing fails
onpause: null, // callback for "pause"
onplay: null, // callback for "play" start
onresume: null, // callback for "resume" (pause toggle)
position: null, // offset (milliseconds) to seek to within downloaded sound.
pan: 0, // "pan" settings, left-to-right, -100 to 100
stream: true, // allows playing before entire file has loaded (recommended)
to: null, // position to end playback within a sound (msec), see demo
type: 'audio/mp3', // MIME-like hint for canPlay() tests, eg. 'audio/mp3'
usePolicyFile: false, // enable crossdomain.xml request for remote domains (for ID3/waveform access)
volume: 100, // self-explanatory. 0-100, the latter being the max.
whileloading: function () {
},
whileplaying: function () {
_this.currentPosition = ((this.position / this.duration) * 100);
},
onfinish: function () {
_this.nextTrack();
},
onload: function () {
if (this.readyState == 2) {
console.log('Error loading track');
_this.nextTrack();
}
}
}
});
}
/*Tinhs giay */
Timelable: any;
totalTime(input) {
var min = (input / 1000 / 60) << 0,
sec = Math.round((input / 1000) % 60);
this.Timelable = this.pad(min) + ':' + this.pad(sec);
}
pad(d) {
return (d < 10) ? '0' + d.toString() : d.toString();
}
}
link app:
https://play.google.com/store/apps/details?id=com.dproject.radiozing