Hi! I'm trying to add an audio widget with autoplay but the SiteOrigin widget for audio doesn't have the autoplay option as far as I know. What I did is to use the audio shortcode provided by Wordpress (https://codex.wordpress.org/Audio_Shortcode):
The problem I have now is that when you enter to the page for the first time and CSS and JS are not still cached, the audio player appears unstyled and it starts playing the audio. After some seconds there is some javascript (I guess it's /wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1) that loads and restyles the audio player making it to reload and re-play the song from the beginning. Is there any solution to this problem? I don't know if it's a problem of Wordpress itself or a problem of the theme.
Another option is to add a raw HTML5 audio tag, but its design looks a bit ugly.
I attach a video so you can see what is the problem.
The un-styled to styled "blink" is caused because WordPress is loading files to change the design of this audio player. The reason for this is that each browser render the HTML audio tag differently. To provide a consistent design in all major browsers some extra files are needed to do this, but the downside of this is that the default WordPress audio shortcode is very slow (https://www.webhostinghero.com/blog/the-wordpress-audio-shortcode-is-slow-use-html5-instead/)
I just tested the audio shortcode on my local theme installation in different browsers but could not find the issue you have. The audio start playing after the design for the audio player is loaded. Only in Chrome the autoplay option is not working because this is a policy of Chrome (only muted autoplays are allowed).
Can you try to add the shortcode to a new blank page and see if the issue remain? Also can you point me to the link of your website where I can see this issue live?
I checked the audio element on the test page and on the homepage but for the test page it is working correctly for me and I did not notice the replay issue you have on the homepage. On the homepage I do notice the replay issue most of the time when I refresh the page.
Unfortunately there is not really much I can do about this issue. The audio shortcode is coming from the WordPress core and our theme does not enhance or change anything about this shortcode.
The only solutions I can provide you are:
1. Use the native HTML5 <audio> element. 2. Remove the autoplay attribute from the shortcode. I know this is not the solution you're looking for but autoplay audio is not really great for the user expierence, it is discouraged by W3C 3. I did not try this but maybe you could try an audio plugin instead of the default WordPress shortcode 4. Host your audio on a 3th party website like SoundCloud for example
Thanks for the suggestions :) Then I think I will try to use HTML5 or remove it completely. Using a plugin would increase the load time of the site and I think it's not worth enough.
Hi! I'm trying to add an audio widget with autoplay but the SiteOrigin widget for audio doesn't have the autoplay option as far as I know. What I did is to use the audio shortcode provided by Wordpress (https://codex.wordpress.org/Audio_Shortcode):
The problem I have now is that when you enter to the page for the first time and CSS and JS are not still cached, the audio player appears unstyled and it starts playing the audio. After some seconds there is some javascript (I guess it's /wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.6-78496d1) that loads and restyles the audio player making it to reload and re-play the song from the beginning. Is there any solution to this problem? I don't know if it's a problem of Wordpress itself or a problem of the theme.
Another option is to add a raw HTML5 audio tag, but its design looks a bit ugly.
I attach a video so you can see what is the problem.
Thanks! :)
Hi there,
Thank you for adding the video.
The un-styled to styled "blink" is caused because WordPress is loading files to change the design of this audio player. The reason for this is that each browser render the HTML audio tag differently. To provide a consistent design in all major browsers some extra files are needed to do this, but the downside of this is that the default WordPress audio shortcode is very slow (https://www.webhostinghero.com/blog/the-wordpress-audio-shortcode-is-slow-use-html5-instead/)
I just tested the audio shortcode on my local theme installation in different browsers but could not find the issue you have. The audio start playing after the design for the audio player is loaded. Only in Chrome the autoplay option is not working because this is a policy of Chrome (only muted autoplays are allowed).
Can you try to add the shortcode to a new blank page and see if the issue remain? Also can you point me to the link of your website where I can see this issue live?
Thanks.
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Hi there,
I checked the audio element on the test page and on the homepage but for the test page it is working correctly for me and I did not notice the replay issue you have on the homepage. On the homepage I do notice the replay issue most of the time when I refresh the page.
Unfortunately there is not really much I can do about this issue. The audio shortcode is coming from the WordPress core and our theme does not enhance or change anything about this shortcode.
The only solutions I can provide you are:
1. Use the native HTML5 <audio> element.
2. Remove the autoplay attribute from the shortcode. I know this is not the solution you're looking for but autoplay audio is not really great for the user expierence, it is discouraged by W3C
3. I did not try this but maybe you could try an audio plugin instead of the default WordPress shortcode
4. Host your audio on a 3th party website like SoundCloud for example
Best regards,
Barry
QreativeThemes.com | WordPress Themes
Thanks for the suggestions :) Then I think I will try to use HTML5 or remove it completely. Using a plugin would increase the load time of the site and I think it's not worth enough.
Thanks :)
You're welcome
If you have any questions feel free to ask
Best regards,
Barry
QreativeThemes.com | WordPress Themes