How to add audio to my pomodoro from an external source? [Notifications API]

Hey guys,

I’m finishing my pomodoro clock, and i try to use Notifications API.

So I actually got notifications work, but i wanted to play a quiet sound along with it.

The world would be beautiful to me if this was available in browsers.

I wonder what is the good way to do it? Any clues?

I thought i would append this to the website, and remove it after it played the sound, but i can’t make it work at all (even on the page load). I assume my url to the source is bad. Is it actually possible to pass the source as url?

  <audio autoplay>
      <source src="http://www.freesound.org/people/knova/sounds/197226/download/197226__knova__kmntone4.mp3" type="audio/mp3">
    </audio>

Maybe there’s other way i can’t think of?

Add this to your html

<audio id="notification" src="filename" preload="auto"></audio>

then call it in the javascript with

document.getElementById("notification").play();

It didn’t work. I guess it’s the url’s fault.

I thought i need a direct link to the file.

I made it work using files from this site: http://www.wav-sounds.com/
But there are only few sounds.

What websites would you recommend for audio sounds? And how to get urls properly?

First, its easier to do it pure javascript

var audio = new Audio('www.link.com');
audio.play();

For hosting audio, you can use dropbox, onedrive, etc. Cloudinary is a very good place to host images, videos, and probably sound. I personally use dropbox for its ease of use.

To get url properly, the link should be an actual audio file.
For example,

https://s3.amazonaws.com/freecodecamp/simonSound1.mp3

if you put that in your browser, you will get a audio player:

But if you have a link such as
http://mp3-skulls.net/music/get/1234588798/Panda.html

it will not work, because it is a html file not an mp3. If you get an audio player when you open it in browser, it is a valid audio file. Check the specifications for file services such as dropbox or onedrive as there are certain things you must change to get a direct link (dropbox must be https://dl.dropbox.com).

2 Likes

this dl.drobbox.com - gets me to 404 :slight_smile:

Yeah i know it needs to be an audio sound, obviously, but this didn’t work either: http://www.freesound.org/people/knova/sounds/197226/download/197226__knova__kmntone4.mp3

is this because there is no audio player embeded?

Thanks for advice, i will try dropbox :slight_smile:

For dropbox just change the www. to dl.

Example
https://www.dropbox.com/s/3ikiysuxrsacajv/no.mp3?dl=0

https://dl.dropbox.com/s/3ikiysuxrsacajv/no.mp3?dl=0
https://dl.dropbox.com/s/3ikiysuxrsacajv/no.mp3?dl=0

Your link is not a valid audio file, because when I click it, it opens a freesound login page…

1 Like

What about this?
https://dl.dropbox.com/s/y8eg9qmvqs6kzfn/22627__corsica-s__timer.flac?dl=0

It is a valid file but there’s no sound in codepen. It froze my countdown too.

not sure if codepen can read .flac file. not sure what it is but I downloaded it from freesound

1 Like