Audio Element

johnny.fowler2
58 Posts
johnny.fowler2 posted this 12 March 2024
Wishlist

Audio Element - Safari on iPhone & FireFox on Windows 10 almost always fails

Hi,
My new church website uses the Audio Element for over 500 sermons in 72 webpages, and we love it.
(1) The Audio Element in Safari browser fails with iPhone & in FireFox on Windows 10 (tried clearing cache).
(2) The Audio Element in Chrome browser in the iPhone works great for the same webpages.
(3) The Audio Element in Safari browser works great on iMac & other Apple products, not iPhones.
(4) The Audio Element in Microsoft Edge browser works great for the same webpages.
(5) The Audio Element in Aviara Secure browser (probably based on Chrome engine) works great.

Two Example webpages:
https://anchorofgrace.org/index.php/living-water?view=article&id=5&catid=2
https://anchorofgrace.org/index.php/living-water?view=article&id=35&catid=2

Need some advice...

Has anyone experienced this problem?
Johnny Fowler

Audio Element - Safari on iPhone & FireFox on Windows 10 almost always fails Hi, My new church website uses the Audio Element for over 500 sermons in 72 webpages, and we love it. (1) The Audio Element in Safari browser **fails** with iPhone & in FireFox on Windows 10 (tried clearing cache). (2) The Audio Element in Chrome browser in the iPhone **works great** for the same webpages. (3) The Audio Element in Safari browser **works great** on iMac & other Apple products, not iPhones. (4) The Audio Element in Microsoft Edge browser **works great** for the same webpages. (5) The Audio Element in Aviara Secure browser (probably based on Chrome engine) **works great**. Two Example webpages: https://anchorofgrace.org/index.php/living-water?view=article&id=5&catid=2 https://anchorofgrace.org/index.php/living-water?view=article&id=35&catid=2 Need some advice... Has anyone experienced this problem? Johnny Fowler

Last edited 13 March 2024 by Support Team

Vote to pay developers attention to this features or issue.
10 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 12 March 2024

Hello JOHNNY,

Thanks for using Nicepage. We are happy that you loved this.

We checked Firefox inspect console.

The error messages you're seeing in Firefox point to a Cross-Origin Resource Sharing (CORS) issue. This is a security mechanism that prevents websites from loading resources from different domains unless the server hosting the resources explicitly allows it.

Here's how to address the problem:

1. Fix the CORS Issue (Recommended):

This is the best solution for long-term functionality and security. The issue lies with your church website's server needing to be configured to allow Firefox to access the audio files. This can be done by adding appropriate CORS headers to the server response.

Unfortunately, I can't directly modify server configurations, but here's some information to help you or your website administrator fix it:

The server needs to add the header Access-Control-Allow-Origin to the response for the audio files.
The value of this header can be set to * to allow requests from any origin (not recommended for production due to security concerns). A more secure approach is to specify the origin of your website (e.g., https://anchorofgrace.org).

2. Temporary Workaround (Not Ideal):

This is a less secure solution but might be helpful for a quick fix:

Firefox Addon: You can install an addon like "CORS Unblock" in Firefox. These addons disable CORS checks, but be aware that they bypass security restrictions and could potentially expose your browser to vulnerabilities.

Resources:

CORS: https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/
Adding CORS headers: (Specific instructions will depend on your server software)

I hope this helps! Let me know if you have any other questions.
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello JOHNNY, Thanks for using Nicepage. We are happy that you loved this. We checked Firefox inspect console. The error messages you're seeing in Firefox point to a Cross-Origin Resource Sharing (CORS) issue. This is a security mechanism that prevents websites from loading resources from different domains unless the server hosting the resources explicitly allows it. Here's how to address the problem: **1. Fix the CORS Issue (Recommended):** This is the best solution for long-term functionality and security. The issue lies with your church website's server needing to be configured to allow Firefox to access the audio files. This can be done by adding appropriate CORS headers to the server response. Unfortunately, I can't directly modify server configurations, but here's some information to help you or your website administrator fix it: The server needs to add the header Access-Control-Allow-Origin to the response for the audio files. The value of this header can be set to * to allow requests from any origin (not recommended for production due to security concerns). A more secure approach is to specify the origin of your website (e.g., https://anchorofgrace.org). **2. Temporary Workaround (Not Ideal):** This is a less secure solution but might be helpful for a quick fix: Firefox Addon: You can install an addon like "CORS Unblock" in Firefox. These addons disable CORS checks, but be aware that they bypass security restrictions and could potentially expose your browser to vulnerabilities. **Resources:** CORS: https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/ Adding CORS headers: (Specific instructions will depend on your server software) **I hope this helps! Let me know if you have any other questions.** ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
johnny.fowler2
58 Posts
johnny.fowler2 posted this 12 March 2024

George,
Thanks for all your help. We'll give notice on what browsers our family of friends on the website can use.
As a future prospect, is it possible to use the JWplayer with the Audio Element so that it doesn't have to use an external domain? I've noticed that https://sermonspeaker.net uses a medial players from www.mediaelements.js.com which is downloadable. See their list at https://www.sermonspeaker.net/download/6-sermonspeaker/5-player-plugins.html

You probably know all this. Just trying to help.

Johnny

George, Thanks for all your help. We'll give notice on what browsers our family of friends on the website can use. As a future prospect, is it possible to use the JWplayer with the Audio Element so that it doesn't have to use an external domain? I've noticed that https://sermonspeaker.net uses a medial players from www.mediaelements.js.com which is downloadable. See their list at https://www.sermonspeaker.net/download/6-sermonspeaker/5-player-plugins.html You probably know all this. Just trying to help. Johnny
johnny.fowler2
58 Posts
johnny.fowler2 posted this 12 March 2024

PS: not "medial playes" , but "media players" above

PS: not "medial playes" , but "media players" above
Support Team
Support Team posted this 12 March 2024

Hello JOHNNY,

Thanks for using Nicepage.

The Audio Element:
This is a built-in feature for playing audio on web pages. It's familiar and easy to use, but it lacks features like playlists, customizable controls, and detailed playback statistics.

JWPlayer:
This is a popular JavaScript library that provides a powerful audio player with those advanced features. It can create a more engaging experience for your listeners.
Self-Hosting JWPlayer (Limited with Nicepage):
JWPlayer can be self-hosted, but currently, Nicepage doesn't have built-in support for that.

Alternative: MediaElement.js

You mentioned that Sermonspeaker.net uses MediaElement.js. That's a great option. It's free, downloadable, and offers some extra features compared to the Audio Element. It might not be as feature-rich as JWPlayer, but it integrates well.

Here's the takeaway:

  • Audio Element: Simple and familiar, but limited.
  • MediaElement.js Offers some improvements and requires download and integration.
  • JWPlayer: Most features, use an external domain (unless self-hosted, with limitations).

Choosing the Right Option:

The best choice depends on your needs.

  • If you prioritize simplicity, the Audio Element might suffice.
  • If you want more features and can handle some integration work, MediaElement.js could be a good fit.
  • For the most advanced features, JWPlayer is great, but it requires an external domain or technical expertise for self-hosting.

Please let us know if you have any further questions
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello JOHNNY, Thanks for using Nicepage. **The Audio Element:** This is a built-in feature for playing audio on web pages. It's familiar and easy to use, but it lacks features like playlists, customizable controls, and detailed playback statistics. **JWPlayer:** This is a popular JavaScript library that provides a powerful audio player with those advanced features. It can create a more engaging experience for your listeners. Self-Hosting JWPlayer (Limited with Nicepage): JWPlayer can be self-hosted, but currently, Nicepage doesn't have built-in support for that. **Alternative: MediaElement.js** You mentioned that Sermonspeaker.net uses MediaElement.js. That's a great option. It's free, downloadable, and offers some extra features compared to the Audio Element. It might not be as feature-rich as JWPlayer, but it integrates well. **Here's the takeaway:** - Audio Element: Simple and familiar, but limited. - MediaElement.js Offers some improvements and requires download and integration. - JWPlayer: Most features, use an external domain (unless self-hosted, with limitations). **Choosing the Right Option:** **The best choice depends on your needs.** - If you prioritize simplicity, the Audio Element might suffice. - If you want more features and can handle some integration work, MediaElement.js could be a good fit. - For the most advanced features, JWPlayer is great, but it requires an external domain or technical expertise for self-hosting. Please let us know if you have any further questions ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
johnny.fowler2
58 Posts
johnny.fowler2 posted this 13 March 2024

George,
Thanks for your help.
I've thought about it, and I might add a small button for "Alternate Player" under the Audio Element that simply opens the MP3 file to a blank tab. That way, the Browser player will automatically start the audio mp3; and the user can download it to the computer. On the iPhone they can listen but not download.
Have a great day, really enjoyed your responsive and informative reply.
My Pastor loves the Audio Element and it's simplicity!
Johnny

George, Thanks for your help. I've thought about it, and I might add a small button for "Alternate Player" under the Audio Element that simply opens the MP3 file to a blank tab. That way, the Browser player will automatically start the audio mp3; and the user can download it to the computer. On the iPhone they can listen but not download. Have a great day, really enjoyed your responsive and informative reply. My Pastor loves the Audio Element and it's simplicity! Johnny
Support Team
Support Team posted this 13 March 2024

Hello JOHNNY,

Thank you! We have passes your suggestion to our dev team.
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello JOHNNY, Thank you! We have passes your suggestion to our dev team. ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 13 March 2024 by Support Team

johnny.fowler2
58 Posts
johnny.fowler2 posted this 14 March 2024

Thanks for all the help!

Thanks for all the help!
Support Team
Support Team posted this 18 March 2024

Hello JOHNNY,

You're welcome! If you have any more questions or need any further assistance, feel free to ask!

We will be happy to help you at any time.
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello JOHNNY, You're welcome! If you have any more questions or need any further assistance, feel free to ask! We will be happy to help you at any time. ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
johnny.fowler2
58 Posts
johnny.fowler2 posted this 20 March 2024

Great product, Great support.

Great product, Great support.
Support Team
Support Team posted this 20 March 2024

Hello JOHNNY,

You're welcome!

If you have any more questions or need any further assistance, feel free to ask!

We will be happy to help you at any time.
...................................................
Sincerely,
George.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello JOHNNY, You're welcome! If you have any more questions or need any further assistance, feel free to ask! We will be happy to help you at any time. ................................................... Sincerely, George. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments