Can't access music files on my site (CORS Header missing)

Question

I'm creating my twine 2 game with Harlowe and the Howler audio extension for Harlowe. I'm creating the game online inside the browser.

I've uploaded background music I'd like to use to my webspace. When I try to create a new Howl with the website + filename as source, the music doesn't load or play. The browser console reads something like:

Cross Origin request was blocked. The same source rule prohibits the use of the external source at http://www.... Reason: CORS Header 'Access Control Allow Origin' is missing.

Honestly, I'm pretty dumb when it comes to HTML and Javascript, so I'm completey lost here. I can imagine that either my webspace provider or Twine prohibits the use of the external source. Is the only solution to upload the game to my webspace - which I don't want to do, because then there will be ads in the game? (I want to use philome.la). Is there another solution for my problem?

Many thanks in advance!

Answer 1

The security functionality of the web-browser itself is issuing that warning because your HTML file is hosted on one domain (may be local:) and the audio files are on another domain, that is what the "Cross Origin" part of the error message is referring to.

Without knowing exactly how you are using the Harlowe library in your project (eg. source code examples) it is hard to give a definitive answer.

This issue on the Howler repository is semi-related and links to the relevant html5 Howler option that may help you get around the CORS issue.

Comments

In the startup passage of my story, im initializing the sound with the following code...

<script>
var magicforest = new Howl({ 
src:['http://alexanderklimon.heimat.eu/dasspiel/MagicForest.mp3','http://alexanderklimon.heimat.eu/dasspiel/MagicForest.ogg'],
loop:true,
html5:true,
buffer:true,
});
</script>

According to the link you gave me, both the html5 and the buffer property should help with the error message. Sadly, nothing changes and the music doesnt play, although I know the sound files are at that position. What am I doing wrong?

---

I don't get that error message any more, though, so something else must be wrong. I play the sound with magicforest.play(); in the first passage.

---

It seems now the problem is my webspace provider. The site isn't accessible right now. Many thanks for the link, btw!