DEV Community

Cover image for Made sound effects for when I have an error
Jaden Concord
Jaden Concord

Posted on

4

Made sound effects for when I have an error

I recently added some tests to my javascript code for a frontend project.
Here is one of them for example,

test('Eval Template', EvalTemplate('let result = "hola"; return result;'), 'hola');
~~~{% endraw %}
I thought it would be cool to play some sounds when they passed or failed.  
Its actually quite simple, you just wrap your main script in a function like start and use try and catch to check if there was an error and play sound.{% raw %}
~~~js
function start(){
  error
}
// in test.js
try{
  start();
}
catch(e){
  consoleLogStuff(e);
  playSound();
} // Thats the idea
~~~{% endraw %}

All you do to to play a sound is{% raw %}
~~~js
new Audio('path/to/sucsess.mp3').play();
~~~{% endraw %}
And I didn't forget to make fancy console log stuff.{% raw %}
~~~js
console.log('%cSUCSESS',
  'color:#111;background:#6e6;padding:16px;font-size:40px;\
  font-weight: bold;display:block;text-align:center;border-radius:16px;');
~~~
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p8078difaidy9ekk4avm.png)

Now I hear a chime or error sound when testing which is actually quite helpful. If you do this, you should use VS live server or Atom live server extension for best experience.
Enter fullscreen mode Exit fullscreen mode

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (4)

Collapse
 
cubiclesocial profile image
cubiclesocial

For a good time, make the failure sound be flatulence and accidentally place it into production.

(P.S. It is spelled "success" not "sucsess")

Collapse
 
jadenconcord profile image
Jaden Concord

That would be funny, I worry I might forget to remove it when I deploy. Thanks for the grammar notice.

Collapse
 
starryepidemic profile image
StarryEpidemic

SUCSESS

Collapse
 
ben profile image
Ben Halpern

This is good 😅

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay