Site Background Music

Design help Custom code
1

Hi,

I’ve ready through all of the topics I could get my hands on about custom code for background music, but I haven’t been able to get it to work. This is for a personal wedding site, so we can forego any debate on whether it’s a good idea or not (I wouldn’t include background music on any kind of site looking to generate business.)

image

image

This is the current code I’m running, but the music is spotty. It only plays some of the time.

This is the code one of the topics suggested I use, but I was unsuccessful.

image

HELP!

Thanks!

2

@blackpandaseo, please post the read-only site link as custom code is basically impossible to troubleshoot without it.

3

@sam-g Thanks for the response. The link is here.

4

You, my friend, are about to start navigating into the dark waters of “autoplaying” media in a browser. I have dealt with it for several times now and it does drive me crazy to this day…Here’s a nice read: Autoplay policy in Chrome - Chrome Developers

TL;DR: You need the user to trigger the audio to play. Audios can`t be played automatically until the users asks for it to be played. (Ex: By clicking on a button or etc).

There are a few tricks to try to go around it, but very few actually worked when I tried.

2 Likes
5

Thanks Jeandcc for the response. This ask is not common and I agree that I wouldn’t recommend it for business use. This site is for nostalgic purposes.

Thanks

6

Any thoughts?.. Thanks!

7

@blackpandaseo - can you share the published site link as well? Forgot to ask in my original post.

8

Yep, no problem.

https://www.garrettandkendyl.com

9

So the first thing I’ll say is optimize your images, the homepage is loading 86mb of data on the first load and you have some enormous images:

image
image2204×652 213 KB

As far as the background music goes, after fairly extensive research it appears that this may not be possible in Chrome currently. All solutions on Stackoverflow are no longer working with current versions of Chrome. I tried 5 different solutions with embeds, iframes, javascript, etc…with no luck. I can’t find a current answer, unfortunately you may have to rely on the user to press play or abandon the feature.

10

Thanks for the quick response!

Bummer to hear about the background music, but I’ve also been concerned about my loading time.

Are you aware of any articles/tools that would best teach me how to optimize my images and improve my loading time?

11

@blackpandaseo - images are definitely your largest opportunity. I would recommend resizing, cropping and then minifying your images.

For example this image is being displayed at 346 x 400 pixels, but the source image is 3125 x 5464 (https://uploads-ssl.webflow.com/5eac64e2d76edd0914e5465a/5ec09a966875cada5ddfb33c_IMG_6004_2.jpg) pixels, at the most you probably need this image to be 700 x 800, even that might be unnecessary. You can also then optimize the images once you resize them using a service like this: https://tinyjpg.com/

image

Check out: https://developers.google.com/speed/pagespeed/insights/ - for recommendations and to see your improvements after you make changes.

12

Super helpful! Thanks @sam-g.

Last question, where did you pull the list of my images with file size?

I’d like to do an audit like that on future sites I build.

13

http://gtmetrix.com/ and Overview - Chrome Developers are good places to start.

1 Like
14

In our real estate business, we produce websites with lots of home photos. We use Mass Image Compressor - which you can download here… to massively reduce file sizes. We then upload the compressed files to SmugMug with whom we have an account. From SmugMug, we take an embed code for the photo gallery and on our Webflow site for that property, we use an embed block to display the photos. An example here.

2 Likes
15

I was often helped on the forum and I also want to tell you, I leave a link to my project, in which I inserted music on the site. She works pretty well. The main thing is to click on the music icon, but in web flow you can customize this icon yourself. make it attractive so that the user sees it and decides to click and then the music will turn on. Clicking again. the music will pause, but that’s not all, I am attaching a script that you just need to copy and paste. It will allow you to continue playing music when moving to other pages. It’s fine.

https://george-studio.webflow.io/audio

https://preview.webflow.com/preview/george-studio?utm_medium=preview_link&utm_source=designer&utm_content=george-studio&preview=0535d11f64d625ccc8cc608a09a2b884&pageId=5ed0eb1ad48b143df99403b6&mode=preview

This code embed /body :

you need to get a direct link with the ending .mp3 just drop it in the hosting, the directory is the easiest way`

for some reason I can’t insert the code here on the forum. I will attach a piece of code in the page settings, where the rest of the code is, you need to work on it. It makes the music continue when you go to other pages