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.
Top comments (9)
My heart skipped a beat, when the sound turned on. :D
Hehehe :P
What browser are you using? I cannot get it to autoplay :(
I used the latest version of Mozilla Firefox on a macbook.
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.
Ahh... Sometimes it's "funny", how many things affect the behaviour. Congrats for finding the solution and for the dancing pizza slice 🙂
FYI on iPhone it autoplays…scared me half to death lol!
Very fun interpretation!
It autoplays on iPhone? That's funny, disabling autoplay/download was in part to save data on mobile. Maybe it's a setting?
it autostarted on chrome Version 94.0.4606.71 (Official Build) (64-bit) as well
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.