learn unity 2d _ tutorials step by step make one game

<div dir="ltr" style="text-align: left;" trbidi="on">
 
 
 
A. Lib using soundmanager2 
B. step by step 
1. download lib soundmanager2 
<a href="http://www.schillmania.com/projects/soundmanager2/">http://www.schillmania.com/projects/soundmanager2/</a> 
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: <a href="https://play.google.com/store/apps/details?id=com.dproject.radiozing">https://play.google.com/store/apps/details?id=com.dproject.radiozing</a> 
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxagollIvGXlbt88gaiZSqyVH_twFod_8uXR1gNnTHqOEFBHpQTa5QJWXySHYU0cmBGVssHXvT6SWSHF4CUE6vRejHDC3WzEBXvEZAOwAvKtUx59M0ym3QvBj7J31gfXfJMAyufP-CS1h/s1600/Screenshot_20170417-195534.png" imageanchor="1"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36OFxyFNTIrxdv3mguWWOmSiNdg3J4DysuvM91CjPLjjIvLGbT8AEHUFW85VxDWkNYmL0jGnX78_QBtZgFSbJCC15n4Fa2ZLkdonR5dK0BU_fvMKfpBdNNaIi7b-YvBk1vegd_SB-iXZR/s1600/Screenshot_20170417-195519.png" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36OFxyFNTIrxdv3mguWWOmSiNdg3J4DysuvM91CjPLjjIvLGbT8AEHUFW85VxDWkNYmL0jGnX78_QBtZgFSbJCC15n4Fa2ZLkdonR5dK0BU_fvMKfpBdNNaIi7b-YvBk1vegd_SB-iXZR/s320/Screenshot_20170417-195519.png" width="180" /></a><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxagollIvGXlbt88gaiZSqyVH_twFod_8uXR1gNnTHqOEFBHpQTa5QJWXySHYU0cmBGVssHXvT6SWSHF4CUE6vRejHDC3WzEBXvEZAOwAvKtUx59M0ym3QvBj7J31gfXfJMAyufP-CS1h/s320/Screenshot_20170417-195534.png" width="180" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlDtirhIf1KkrQn8RoA_6_PmD_ZVFtXseQ6I0ktEQ7dWsomzKe4qAOLY7huMhyphenhyphenDIfoAfUDOJxSfdtaIEbUPTZ9L4EXbPygO9QtqfS7gHMns1G1whAqbuzejoARwQH1cM3a6xtXZlw3D3P/s1600/Screenshot_20170417-195442.png" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlDtirhIf1KkrQn8RoA_6_PmD_ZVFtXseQ6I0ktEQ7dWsomzKe4qAOLY7huMhyphenhyphenDIfoAfUDOJxSfdtaIEbUPTZ9L4EXbPygO9QtqfS7gHMns1G1whAqbuzejoARwQH1cM3a6xtXZlw3D3P/s320/Screenshot_20170417-195442.png" width="180" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8o0UdwWTSVzVogZDt0hhDfl2OFWuPSONhneKJmxytEgVDN7-6g6uKAqTv93rvS9IDdEB6_HCJi0lGVpXHU6FppDTFekF1hipRehxPqahkn_3_0V_5KLGdvXIDwXFf0q669QNdOi0pe5Y/s1600/Screenshot_20170417-195503.png" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8o0UdwWTSVzVogZDt0hhDfl2OFWuPSONhneKJmxytEgVDN7-6g6uKAqTv93rvS9IDdEB6_HCJi0lGVpXHU6FppDTFekF1hipRehxPqahkn_3_0V_5KLGdvXIDwXFf0q669QNdOi0pe5Y/s320/Screenshot_20170417-195503.png" width="180" /></a></div>

Ionic 2: muisic app( Radio Zing) Stream audio

A . Lib using soundmanager2 B. step by step 1. download lib soundmanager2 http://www.schillmania.com/projects/soundmanager2/ 2. c...

ionic 2: fix page white load app

Ionic 2: muisic app( Radio Zing) Stream audio

Bài đăng phổ biến

Comments

Blog Archive