Very nice tutorial. Simple and clean. A couple of fixes I would add: To prevent the ion-range from updating while we are dragging it (you can see this buggy behaviour in 18:22) 1. Define a boolean variable "isDragging" initialized to false. 2. Add (touchstart)="dragStart()" and (mousedown)="dragStart()" to the range component 3. Implement dragStart() { this.isDragging = true } 4. Add this.isDragging = false in the seek() method 5. In updateProgress() method only update this.progress if this.isDraggin is true Also if you let an audio end, you should update the play/pause button 1. Add this.isPlaying = false inside the onend callback of the howl player 2. (optional) remove this.isPlaying = !pause inside the togglePlayer method. I see cleaner to implement the onpause callback and update this.isPlaying there Something like: this.player = new Howl({ src: [track.path], onplay: () => { this.isPlaying = true this.activeTrack = track this.updateProgress() }, onpause: () => { this.isPlaying = false }, onend: () => { this.isPlaying = false } })
Saved my life (yet again) with this. Spent hours this weekend going around and around on the native Audio plugin and the capacitor 3 community audio plugin...to no avail. Howler just works! Thanks again matey! [bows, bows and bows again]
thanks a lot for this tutorial. Always the first place where I am looking when having an ionic problem. I would have a question. In iOS I am getting following when Audio is played: Error acquiring assertion:
Hi Simon, Im not interested in the audio app, I just came here to say thank you! because of you I have a lot of open doors in the field of computer jobs in a third world country!
Thanks so much for this tutorial. Instead of playing the audio files from "assets" folder, can I load the audio files from URL? I checked your other tutorial of streaming media, but I don't want the user to leave my App's interface. This solution is great with those seek, play and pause.
I guess streaming with this plugin won't work, you could only download the file to your app and then continue to use this plugin to play that file from your apps folder!
HI Simon, Thank you for great support for Ionic concepts...Here i want to know you are using any Cordova Plugin for Audio Player and can i know how can you add the Music into Projects folder.. If there is any can you revert me...
Thank you very much Simon! This is indeed a big help. I have one question, is it possible to save the current seek position and resume from that point?
Hi, I'm using this player on a song page that returns to other pages, but when returning if a song is playing, it doesn't stop when leaving the page, any solution?
Hello is there any way to stop music back press page or on app runs in background, I have tried this start(track: Track) { if (this.player) { this.player.unload(); this.player.stop(); } } but it is not working
great tutorial. Simon it's there a place, blog, or rss where you find this libraries, like Howler.js? Because sometimes you need a functionality and use project time to building from scratch and maybe someone already did that job...
Good question, I always try to ignore them :D But I will try to keep an eye on this topic and list out some problematic areas. Most of the time I just find a hackish way around them x)
Hare Krishn Simon Thanks for great video and your help. I wrote the code as you mentioned. It is working fine with both safari and chrome in Mac, Ios and Android respectively. It is generating notification in android when screen is lock but notification are not shown in iOS when screen is locked and track is played. How display notification in iOS in screenlock?
great video. maybe an obvious question, but if I set the 'src' to an array of songs, how can I can all songs to play. at the moment when I hit play first song plays and then it stops and does not go to the next song? -- edited: looks like only one song at a time can be passed on to 'src'
I tried one simple thing today in ionic for Audio; used "audio" HTML5 tag and it worked in Android for both locations... assets folder as well as URL. Can you please tell me why to use a native plugin and not just the audio tag? Any security or compatibility issues?
HowlerJS is built by a company that make games but gets you up and running quickly. WebAudio API has more functionality but you need to put in more work.
I think you can listen to the end event of an audio from the player, and from there basically start the next sound (which you might have in an array) directly from code!
Hey Simon, When if I am going another page and return to our audio page then audio play but footer is not showing, how to solve this, any reference or suggestion please help!
this not working with wordpress rest API, error 'No 'Access-Control-Allow-Origin' header is present on the requested resource." but when I play same audio with html audio player play fine
Great job simon. I am facing one issue while playing audio file from native storage(like storage/emulated/0/Android/data/com.wadhwanmandir.mobileapp/NityaNiyam/2.mp3) rather than from assets folder in capacitor application. In capacitor, file plugin prepends public folder in file path hence NativeAudio plugin is not able to find my mp3 file. I am using cordova file plugin to get my application folder in device like this.file.externalApplicationStorageDirectory Please help in this.
@@galaxies_dev. Yes, it does not show any errors. and Hawler is included perfectly. What other plugin do I need to make it work? Previous days I included an HTML5 tag and the same thing happens to me. When compiling to android does not work. I ask you please help me. It is a university project.
I love it, but i could ask for more. Many of your project you make them simple and ignore I know for teaching purposes, but you could develop them, and we could learn alot from them. For instance this, how to make the app search for music automaticall from the phone and perhaps in the future. to download automatically from the internet. Thank You for amaizing tutorial
@@galaxies_dev no I am using http and it is hosted on my machine only not on server but using livereload in ionic it is loading data but on device it is not showing
This was my first project in Ionic... Thanks for the upgrade!
Good job, Simon! There are a lot of helpful things in the video, not only for a music player project. Keep up the good work!
Thanks a lot Konstantin!
Very nice tutorial. Simple and clean.
A couple of fixes I would add:
To prevent the ion-range from updating while we are dragging it (you can see this buggy behaviour in 18:22)
1. Define a boolean variable "isDragging" initialized to false.
2. Add (touchstart)="dragStart()" and (mousedown)="dragStart()" to the range component
3. Implement dragStart() { this.isDragging = true }
4. Add this.isDragging = false in the seek() method
5. In updateProgress() method only update this.progress if this.isDraggin is true
Also if you let an audio end, you should update the play/pause button
1. Add this.isPlaying = false inside the onend callback of the howl player
2. (optional) remove this.isPlaying = !pause inside the togglePlayer method.
I see cleaner to implement the onpause callback and update this.isPlaying there
Something like:
this.player = new Howl({
src: [track.path],
onplay: () => {
this.isPlaying = true
this.activeTrack = track
this.updateProgress()
},
onpause: () => {
this.isPlaying = false
},
onend: () => {
this.isPlaying = false
}
})
Thanks for your additions!!
Saved my life (yet again) with this. Spent hours this weekend going around and around on the native Audio plugin and the capacitor 3 community audio plugin...to no avail. Howler just works! Thanks again matey! [bows, bows and bows again]
Haha glad it helped Tony!
You just SAVED my life, Simon!!!!
😁😁😁
I was stuck on a mobile webradio project.
Thanks a lot !! 👏👏👏
Really happy I got you unstuck :)
very very important topic. awesome grimm!!! selecting good topics.
Thanks a lot :)
Awesome, thanks a lot, it really worked on my project.
Looking forward to watching you again.
Great to hear!
Thank you Simon bro, never stop
Amazing tutorial not only covered ionic but angular also, Thanks a ton :)
Glad you liked it!
thanks a lot for this tutorial. Always the first place where I am looking when having an ionic problem. I would have a question. In iOS I am getting following when Audio is played:
Error acquiring assertion:
Thank you for sharing. Excellent tutorial.
I like all ur videos guy. A lot of thanks... Just keep on like that. U're very helpfull
Thanks, will do!
thanks for everything Simon :)
You are welcome :)
Awesome video, Simon!!! Really cool app
Great job!
Thank you! Cheers!
Hi Simon, Im not interested in the audio app, I just came here to say thank you! because of you I have a lot of open doors in the field of computer jobs in a third world country!
Wow Carlos I'm so happy to hear that!!
@@galaxies_dev check my video about ionic 5 chat ruclips.net/video/r_372SDj5Bk/видео.html
Very useful and well done! thanks a lot!!
awesome man, you've saved my life, good explanation and nice code, thanks a lot!
Glad to hear that!
You are absolutely ionic God, Love from India 🇮🇳❤️
Thanks a lot 🙌
Fantastic! Very, very, very good!!!!
Thanks for sharing, this is a much better approach to play audio files than cordova media plugin :)
Goood Job brother, thank you
No problem 👍
Thanks so much for this tutorial. Instead of playing the audio files from "assets" folder, can I load the audio files from URL? I checked your other tutorial of streaming media, but I don't want the user to leave my App's interface. This solution is great with those seek, play and pause.
I guess streaming with this plugin won't work, you could only download the file to your app and then continue to use this plugin to play that file from your apps folder!
Hello Simon. This tutorial is great, as always. It works wonderfully on the web but not on android, with ionic 5.
Hi, it works for me. I'm using Pixel 2 API inside of Android Studio.
thanks for another amazing tutorial! This is so much better than the native media plugin for ionic!!
Glad it was helpful!
Really good videos, keep it up!
Good job. Thanks
thanks man,
i am your very big fan.. :)
Thank you 👍
HI Simon, Thank you for great support for Ionic concepts...Here i want to know you are using any Cordova Plugin for Audio Player and can i know how can you add the Music into Projects folder.. If there is any can you revert me...
Thank you very much Simon! This is indeed a big help.
I have one question, is it possible to save the current seek position and resume from that point?
Sure there is a seek() function and I'm sure you can also get the current position with some callback!
super boss, thankyou very much
I want to open image and play audio at same time ..pls help me sir. The above video is awesome .
Great job, but how can I make Music Controls notification work with howler js?
Good work. Thank's
Welcome 👍
Hi, I'm using this player on a song page that returns to other pages, but when returning if a song is playing, it doesn't stop when leaving the page, any solution?
Thanks for this excellent video Simon!
Quick question: How can I make these audios not playing when the app minimizes?
You could listen for the event that your app goes to background and in there stop the player!
Great, Great, Great.....
how can i access to music files in mobile phone?
Hello is there any way to stop music back press page or on app runs in background, I have tried this
start(track: Track) {
if (this.player) {
this.player.unload();
this.player.stop();
}
}
but it is not working
Getting this error "Cannot find module 'howler' or its corresponding type declarations." Howler is installed.
Thank you 👍
Always helpful and learning...
Just a little add to this. Add this.next() to onend body in order to go to the next song after the previous song finishes.
great tutorial. Simon it's there a place, blog, or rss where you find this libraries, like Howler.js? Because sometimes you need a functionality and use project time to building from scratch and maybe someone already did that job...
No I just follow some newsletters like Github trending packages and sometimes pick up these libraries when people use them in other projects!
Simon, can you tel us about some limitation you find in creating mobile apps with ionic ?
Good question, I always try to ignore them :D
But I will try to keep an eye on this topic and list out some problematic areas.
Most of the time I just find a hackish way around them x)
Hare Krishn Simon Thanks for great video and your help. I wrote the code as you mentioned. It is working fine with both safari and chrome in Mac, Ios and Android respectively. It is generating notification in android when screen is lock but notification are not shown in iOS when screen is locked and track is played. How display notification in iOS in screenlock?
I'm not sure if this is a limitation of the web api on iOS :/
Awesome video Simon, all tutorials have been very important to me. How can i use songs from firebase?
Thanks! You might be able to use the streaming-media plugin with a URL to the audio file!
great video. maybe an obvious question, but if I set the 'src' to an array of songs, how can I can all songs to play. at the moment when I hit play first song plays and then it stops and does not go to the next song? -- edited: looks like only one song at a time can be passed on to 'src'
You could maybe listen for the event when a song completes and then play the next from the array!
@@galaxies_dev Thanks, good tip. what I ended up doing is calling start() again from onend().
Thank you for this good video.
Can you please tell me how I can add my mobile storage that I can listening to my own songs?
You would have to somehow retrieve that folder using a file plugin, but I don't have a tutorial on that yet.
I tried one simple thing today in ionic for Audio; used "audio" HTML5 tag and it worked in Android for both locations... assets folder as well as URL. Can you please tell me why to use a native plugin and not just the audio tag? Any security or compatibility issues?
HowlerJS is built by a company that make games but gets you up and running quickly. WebAudio API has more functionality but you need to put in more work.
Good job, Simon!
can you tell me how to play music after it is completed auto play another music from sequence
I think you can listen to the end event of an audio from the player, and from there basically start the next sound (which you might have in an array) directly from code!
@@galaxies_devyes I apply the same logic of next play button onEnd method and it is working fine!!!!
Thank you again!
How can I read a Directory to reproduce audio?
Will this work using ionic with react?
Haven't tried it yet!
💛 from India
Greetings back from Germany!
Hey Simon,
When if I am going another page and return to our audio page then audio play but footer is not showing, how to solve this, any reference or suggestion please help!
Hmm you could try to use the ionViewWillAppear for functionality that should be executed when you come back to the page for example!
sir can u do e-learning courses
in ionic app
I try playing local device files but it does not playing. File not found error is shown if path is from externalRootDirectory. Any suggestions?
Then you should log the path and see a difference to where the actual file is stored I guess!
anyway to do this globally simon? so that it stays playing even when going to a next page or tab etc?
Perhaps moving the code to a service might work, but haven't tried so far!
hello sir, i need play all options ?
hi
how can im[port track
i'm getting error like Cannot find name 'Track'
this not working with wordpress rest API, error 'No 'Access-Control-Allow-Origin' header is present on the requested resource." but when I play same audio with html audio player play fine
You have to add the according CORS headers to your Wordpress API!
@@galaxies_dev thanks & I also miss to add HTML5 true in howl, and I really like your content keep it up
Great job simon. I am facing one issue while playing audio file from native storage(like storage/emulated/0/Android/data/com.wadhwanmandir.mobileapp/NityaNiyam/2.mp3) rather than from assets folder in capacitor application. In capacitor, file plugin prepends public folder in file path hence NativeAudio plugin is not able to find my mp3 file.
I am using cordova file plugin to get my application folder in device like this.file.externalApplicationStorageDirectory
Please help in this.
Hi Simon
how can I fix this
compiler.js:2175 Uncaught Error: Can't resolve all parameters for Howl: (?).
Than you haven't installed it properly since Angular can't pick it up!
Hi Simon. My app works correctly in the Ionic DevApp application; but when I compile it to my android phone, the audio does not work. Any suggestions?
Normally it's the other way around :D Is there any error coming up in your app? Are the plugins installed correctly?
@@galaxies_dev. Yes, it does not show any errors. and Hawler is included perfectly. What other plugin do I need to make it work?
Previous days I included an HTML5 tag and the same thing happens to me. When compiling to android does not work.
I ask you please help me. It is a university project.
hi simon, this player work with ios13? dont has problems?
I haven't tried yet, but I think it should work!
Without Ionic how can I create an Audio player in Angular8?Is it possible>
I love it, but i could ask for more. Many of your project you make them simple and ignore I know for teaching purposes, but you could develop them, and we could learn alot from them. For instance this, how to make the app search for music automaticall from the phone and perhaps in the future. to download automatically from the internet. Thank You for amaizing tutorial
Yeah I try to make a limited example, but I could make a series of posts on some topics that's right. Thanks for the feedback Willian!
@@galaxies_dev Thank you Simon
Hello simon after building app and run on android device from live api I cannot get data
Make sure you use HTTPS and a real URL, not localhost on a device!
@@galaxies_dev no I am using http and it is hosted on my machine only not on server but using livereload in ionic it is loading data but on device it is not showing
hey Howler.volume(0.5); not work for me in android
Hi Simon, is possible use https or http radio link?
I try with local mp3 working but I add url remote and not working
Yeah I think in general it's possible to play/stream audio from a URL; just not sure if it works with this package!
hii! tha's work in reactjs?
I think so as the Audio player is just a JS package!
Hello Sir, how to make autoplay all album?
You could catch the end event of a track and then jump to the next track of your array (album)!
what's the problem with that Howl.js because it reset if i play then puase then play ???
class AudioPlayer {
constructor(srcAudio, srcAudioId) {
this.srcAudio = srcAudio;
this.srcAudioId = srcAudioId;
this.isPlaying = false;
this.seekPosition = 0;
this.player = new Howl({
src: srcAudio,
html5: true,
onplay: () => {
this.isPlaying = true;
console.log('onplay ' + this.srcAudioId);
},
onended: () => {
this.isPlaying = false;
console.log('onended ' + this.srcAudioId);
},
onpause: () => {
this.isPlaying = false;
this.seekPosition = this.player.seek();
console.log('onpause ' + this.srcAudioId);
},
onseek: (event) => {
console.log('onseek ' + this.srcAudioId);
console.log(event);
},
});
}
play() {
console.log('play ' + this.srcAudioId);
this.player.seek(this.seekPosition);
this.player.play();
this.isPlaying = true;
}
pause() {
console.log('pause ' + this.srcAudioId);
this.seekPosition = this.player.seek();
this.player.pause();
this.isPlaying = false;
}
togglePlay() {
if (this.player.playing([this.srcAudioId])) {
this.pause();
} else {
this.play();
}
}
}
const audioModuleControll = (() => {
let audioPlayers = {};
function togglePlayAudio(element) {
const srcAudio = element.getAttribute('data-audio');
const srcAudioId = element.getAttribute('data-id');
if (audioPlayers[srcAudioId]) {
const player = audioPlayers[srcAudioId];
player.togglePlay();
} else {
console.log('playing for the first time', srcAudioId);
const player = new AudioPlayer(srcAudio, srcAudioId);
player.play();
audioPlayers[srcAudioId] = player;
}
}
function addEventListenersFun() {
const playButtons = document.querySelectorAll('.voice-assistant-item .playstory');
playButtons.forEach(function(playButton) {
playButton.addEventListener('click', function(event) {
togglePlayAudio(this);
});
});
}
return {
addEventListenersFun: addEventListenersFun
};
})();
document.addEventListener("DOMContentLoaded", () => {
audioModuleControll.addEventListenersFun();
});
bro how to access volume button of my phone through ionic?
Maybe you can use a Cordova audio plugin to manage the volume?
@@galaxies_dev thanks bro
soon nice thank
and video player how to?
The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type
facing error atnthis.progress = (seek * this.player.duration()) * 100 || 0;
First
Soopar