DEV Community

Cover image for Divtober Day 11: Slice
Alvaro Montoro
Alvaro Montoro

Posted on

Divtober Day 11: Slice

Today's #divtober drawing got a little bit out of hand. The word of the day is "slice," so I went for the obvious choice of a slice of pizza. It looked a bit sad, so I added cute eyes and a mouth. Then I made it dance (à la Peanut-Butter-Jelly-Time)... and then I turned it into an audio element so it could dance/sing to the music.

Here's the demo on CodePen:

Unfortunately, due to the browsers' privacy policies, the songs don't autoplay anymore (or not every time). So, the song won't start until you click on the slice of pizza. In order to do that, I had to cheat a little by adding an inline JavaScript command onclick="this.play()".

It was fun using the <audio> tag instead of a <div>. It opened a lot of doors for enhancing the drawing, adding more than just animation. A pity that the audio doesn't support autoplay or play on click without needing JS.

Also, I learned about the :playing pseudo-class (which I was going to use, so the slice of pizza danced only with the music)... unfortunately, it is not supported anywhere.

This is another example of an animation that looks better on Chrome than on the other browsers because of the @property support that allows to animate the backgrounds.

Discussion (9)

Collapse
polgarj profile image
Jozsef Polgar

My heart skipped a beat, when the sound turned on. :D

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Hehehe :P

What browser are you using? I cannot get it to autoplay :(

Collapse
polgarj profile image
Jozsef Polgar

I used the latest version of Mozilla Firefox on a macbook.

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

Ah! I just saw it! It's a browser setting! I was able to allow autoplay on DEV from the address bar. You must have given permissions to Firefox to autoplay on DEV, and then the demo started.

...Which is funny because technically the audio is not on DEV, it's on CodePen, and the audio file is not on CodePen either but on my personal site... so it's kind of a stretch there from approving autoplay on DEV to playing audio hosted on an unknown source.

Thread Thread
polgarj profile image
Jozsef Polgar

Ahh... Sometimes it's "funny", how many things affect the behaviour. Congrats for finding the solution and for the dancing pizza slice 🙂

Collapse
inhuofficial profile image
InHuOfficial

FYI on iPhone it autoplays…scared me half to death lol!

Very fun interpretation!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

It autoplays on iPhone? That's funny, disabling autoplay/download was in part to save data on mobile. Maybe it's a setting?

Collapse
samhk2222 profile image
samhk222

it autostarted on chrome Version 94.0.4606.71 (Official Build) (64-bit) as well

Collapse
inhuofficial profile image
InHuOfficial

It is something to do with dev, if you open in standard browser it doesn’t - I found that out yesterday with my AI audio article.