Is there a playFile instead of playStream?

[foobar404]

Is there a playFile instead of playStream?

[korbav]

Hi, indeed, you should use fromElement instead, but that's not your only problem.
I just checked your code and it seems there are plenty of other issues.

• First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain.
• Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements.
• Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example

I created another codepen with some fixes. I didn't correct the style I mentioned above.
I replaced your file just by another audio coming from a server with CORS headers enabled.
I got rid of the useless canvas & audios elements.
I created a single one audio element, and one single canvas element that I put above the background image.
I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds.
You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work.

You can find my fork here: https://codepen.io/bil59/pen/JjNNzao

[KoniKodes]

Thank you. This will ultimately be moved to the project hosting domain so that should fix the CORS issue. I wanted the fireworks to begin with turquoise but progress with the colors of the song title sub-text (teal, pink, purple) based on the song that is playing... I’ll check out my styling issue, I was wondering why I couldn’t click. Thank you for the link. I have forked it, and will work on it this evening. I do appreciate your help and look forward to showing you my final works. Toni From: korbav ***@***.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q> . <https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif>

[KoniKodes]

One really dumb question, but I can’t make it work: How do I get the fireworks below the player (lower right of column under the current image) and how do I place it in a straight line instead of a circle? Thank you. From: korbav ***@***.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q> . <https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif>

[korbav]

Thank you. This will ultimately be moved to the project hosting domain so that should fix the CORS issue. I wanted the fireworks to begin with turquoise but progress with the colors of the song title sub-text (teal, pink, purple) based on the song that is playing... I’ll check out my styling issue, I was wondering why I couldn’t click. Thank you for the link. I have forked it, and will work on it this evening. I do appreciate your help and look forward to showing you my final works. Toni From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif

My pleasure, I would be glad to see it :)

One really dumb question, but I can’t make it work: How do I get the fireworks below the player (lower right of column under the current image) and how do I place it in a straight line instead of a circle? Thank you. From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif

I created another fork with your requirements : https://codepen.io/bil59/pen/YzVQVwj

[KoniKodes]

How do I get the server to serve the audio files with a CORS header? I’m hosted on a secure site and thought that would fix the issue. From: korbav ***@***.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q> . <https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif>

[korbav]

How do I get the server to serve the audio files with a CORS header? I’m hosted on a secure site and thought that would fix the issue. From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif

Which provider is it?
Either you can activate the option somewhere in your account, or if you have a full access you can configure by yourself the server.
If not, you can create a .htaccess, and if it's disabled you can also create a PHP file to proxy your audio files.

[KoniKodes]

Hi, I was able to upload and avoid the CORS issue. Thank you for your help. The file is sitting here: https://www.kalukiskreations.com/projects/healing.html And the image and colors do change when it’s play icon is clicked. However, it will only play the original sound chosen. How do I get it to loop through the playlist when I want to go from one song to the other? Thank you, Toni From: korbav ***@***.*** Sent: Monday, July 19, 2021 10:10 AM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) How do I get the server to serve the audio files with a CORS header? I’m hosted on a secure site and thought that would fix the issue. From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34 <#34> ) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment) <#34 (comment)> > , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif Which provider is it? Either you can activate the option somewhere in your account, or if you have a full access you can configure by yourself the server. If not, you can create a .htaccess, and if it's disabled you can also create a PHP file to proxy your audio files. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMNNCJD3QYPV45RJE4YLY3TYRL5XANCNFSM5ARMAT2Q> . <https://github.com/notifications/beacon/AEMNNCOX2PZLJGDA23GCX2LTYRL5XA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSOSMLQ.gif>

[korbav]

Hi, I was able to upload and avoid the CORS issue. Thank you for your help. The file is sitting here: https://www.kalukiskreations.com/projects/healing.html And the image and colors do change when it’s play icon is clicked. However, it will only play the original sound chosen. How do I get it to loop through the playlist when I want to go from one song to the other? Thank you, Toni From: korbav @.*** Sent: Monday, July 19, 2021 10:10 AM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) How do I get the server to serve the audio files with a CORS header? I’m hosted on a secure site and thought that would fix the issue. From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34 <#34> ) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment) <#34 (comment)> > , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif Which provider is it? Either you can activate the option somewhere in your account, or if you have a full access you can configure by yourself the server. If not, you can create a .htaccess, and if it's disabled you can also create a PHP file to proxy your audio files. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCJD3QYPV45RJE4YLY3TYRL5XANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCOX2PZLJGDA23GCX2LTYRL5XA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSOSMLQ.gif

You can take advantage of the onended method of the audio player, here you go : https://codepen.io/bil59/pen/ZEKXeNg

[KoniKodes]

Thank you. That is helpful. And it does work once the song has ended. But I cannot pause it while it is process, and choose another song to play instead. It will only play the original chosen song. Though the image does change. Is this possible? From: korbav ***@***.*** Sent: Wednesday, July 21, 2021 7:34 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34) Hi, I was able to upload and avoid the CORS issue. Thank you for your help. The file is sitting here: https://www.kalukiskreations.com/projects/healing.html And the image and colors do change when it’s play icon is clicked. However, it will only play the original sound chosen. How do I get it to loop through the playlist when I want to go from one song to the other? Thank you, Toni From: korbav @.*** Sent: Monday, July 19, 2021 10:10 AM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34 <#34> ) How do I get the server to serve the audio files with a CORS header? I’m hosted on a secure site and thought that would fix the issue. From: korbav @.*** Sent: Saturday, July 17, 2021 8:14 PM To: foobar404/Wave.js Cc: Toni Shortsleeve; Author Subject: Re: [foobar404/Wave.js] Is there a playFile instead of playStream? (#34 <#34> <#34 <#34> > ) Hi, indeed, you should use fromElement instead, but that's not your only problem. I just checked your code and it seems there are plenty of other issues. * First of all, your server does not serve the audio files with a CORS header, which will block the request from another domain, codepen.io is another domain. * Secondly, if my understanding of your UI is correct you don't need multiple canvas and you don't need multiple audio elements. * Also, you have a styling problem, easy to fix but which prevent you from clicking directly from the play button for the "body upbeat" for example I created another codepen with some fixes. I didn't correct the style I mentioned above. I replaced your file just by another audio coming from a server with CORS headers enabled. I got rid of the useless canvas & audios elements. I created a single one audio element, and one single canvas element that I put above the background image. I also cleaned your code, I created a function so that you don't have to repeat yourself 100 times if you have 100 ambiance sounds. You will see I commented the lines where the audio file & types are supposed to be loaded dynamically, because your server has no CORS, when you will enable CORS, you can uncomment and it will work. You can find my fork here: https://codepen.io/bil59/pen/JjNNzao — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 <#34> (comment) <#34 (comment) <#34 (comment)> > > , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCNSST6T3Y7BKVUZ3WTTYJBHDANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCJTYX2GNVSFXAERU4TTYJBHDA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSJBXNY.gif Which provider is it? Either you can activate the option somewhere in your account, or if you have a full access you can configure by yourself the server. If not, you can create a .htaccess, and if it's disabled you can also create a PHP file to proxy your audio files. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment) <#34 (comment)> > , or unsubscribe https://github.com/notifications/unsubscribe-auth/AEMNNCJD3QYPV45RJE4YLY3TYRL5XANCNFSM5ARMAT2Q . https://github.com/notifications/beacon/AEMNNCOX2PZLJGDA23GCX2LTYRL5XA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGSOSMLQ.gif You can take advantage of the onended method of the audio player, here you go : https://codepen.io/bil59/pen/ZEKXeNg — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#34 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMNNCN7JWH6A6TPXPY4Q3TTY57QNANCNFSM5ARMAT2Q> . <https://github.com/notifications/beacon/AEMNNCKXFVOBXWNAPUHEW2TTY57QNA5CNFSM5ARMAT22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGS5DHVY.gif>

[KoniKodes]

Thank you. That is helpful. And it does work once the song has ended.

But I cannot pause it while it is process, and choose another song to play instead. It will only play the original chosen song. Though the image does change.

Is this possible?

Otherwise I can only change songs by refreshing the entire page.

[korbav]

Thank you. That is helpful. And it does work once the song has ended.

But I cannot pause it while it is process, and choose another song to play instead. It will only play the original chosen song. Though the image does change.

Is this possible?

Otherwise I can only change songs by refreshing the entire page.

I implemented the pause/resume/change track features in your code https://codepen.io/bil59/pen/ZEKXeNg

[KoniKodes]

Hi,
Thank you.
The console log does show the first vs the current song.
But the sound is still of the first song ... This is what I hear on the codepen too.

[korbav]

Hi,
Thank you.
The console log does show the first vs the current song.
But the sound is still of the first song ... This is what I hear on the codepen too.

Yes this is because the test server (with CORS enabled) only contains one single song, so you have the impression that it's not updated but it's actually updated, you can inspect the src attribute of the source element with your developer console to see it in action.

When you will replace the tracks with your real server ones you will hear the difference.

PS: I removed the console message you noticed
Last version updated at the same place: https://codepen.io/bil59/pen/ZEKXeNg

[KoniKodes]

Hi,
The same thing happened on the live server.
I'm not sure what I've done wrong...
Here's the link:
https://www.kalukiskreations.com/projects/healing.html
You can see the console.log (thank you) shows the correct file name:

But the sound continues to only play the first song.

[korbav]

Hi,
The same thing happened on the live server.
I'm not sure what I've done wrong...
Here's the link:
https://www.kalukiskreations.com/projects/healing.html
You can see the console.log (thank you) shows the correct file name:

But the sound continues to only play the first song.

You have forgotten to correct a previous type while editing your script :
player.innerhHTML = ''; should be player.innerHTML = '';

As you can see, it works well with different files https://codepen.io/bil59/pen/MWmOVjj

[KoniKodes]

Oh my, it's the little things. This is why we need documentation editors...

Thank you so much for catching that. Yes, it works great now.
Just in time for her birthday party today.

Please let me know how I can buy you a cup of coffee or a glass of wine. Paypal or other?

[korbav]

Oh my, it's the little things. This is why we need documentation editors...

Thank you so much for catching that. Yes, it works great now.
Just in time for her birthday party today.

Please let me know how I can buy you a cup of coffee or a glass of wine. Paypal or other?

It's my pleasure, I'm glad it worked at time for the birdthday party it's pretty enough for me to make you happy, enjoy this unvaluable time :)