# Advanced Glitch Effect with Sound
by [kirupa](https://www.kirupa.com/about/whatiskirupa.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)
Because the canvas operates at such a low level, it gives us the ability to directly manipulate individual pixels on images. This allows us to create some really interesting effects, like the following glitch effect that also plays a static-sounding hissing noise:
By default, you won't hear the sound when the page loads. That is due to a browser feature to prevent our pages from automatically blaring random stuff into our speakers. To hear the sound, click or tap on the above image. If the sound gets too annoying after a while (like, let's say in 4 seconds), just click or tap the image again to toggle the sound on or off.
Your coding exercise here is to recreate the above effect. It's definitely a bit involved, so a helpful tip would be to break the functionalilty up into smaller sections.
Onwards!
#### Hint: Some Learning Resources and Getting Help
The following tutorials may provide some helpful tips and techniques to help you with this exercise: [Playing Sounds Using the Audio Element](https://www.kirupa.com/html5/playing_sound_audio_element.htm), [Playing a Randomly Generated Sound](https://www.kirupa.com/html5/randomly_generated_sound_web_audio_api.htm), and [Drawing Images on the Canvas](https://www.kirupa.com/canvas/drawing_images.htm).
A big part of this effect revolves around manipulating pixels. Take a look at the following example:
Click on the various buttons to change the appearance of the images. The full source code for this example [can be seen here](https://github.com/kirupa/kirupa/blob/master/examples/bitmap_colors_canvas.htm), so take a look at that for some inspiration that can help you create the glitch effect.
We want to make this a fun learning activity. If you are stuck and need help, please [ask on the forums](https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.
## Getting Your Badge
Once you have completed this exercise, you have earned the tremendous bragworthy privilege of adding the following badge to [your collection](https://forum.kirupa.com/badges/):
To claim it, head to the forums and respond in the [Advanced Glitch Effect topic](https://forum.kirupa.com/t/how-to-print-this-pyramid-pattern/655242). **Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message. **Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.
## One Possible Solution
As with all coding exercises, there are a billion ways to solve them. Below is the code behind the example we saw at the beginning:
```js
Glitch Image Animation with Sound
```
If you have some suggestions, alternate ways of solving this, or just have some questions, please do share this in the [How to Print this Pyramid Pattern](https://forum.kirupa.com/t/how-to-print-this-pyramid-pattern/655242) thread!