htmlhtml5-audiogithub-pages

source an audio file in repo on github pages

I'm hosting a project on github pages and would like to play an audio file that is located in my repository through an html5 <audio> element. when i source it on my dev environment, the audio plays fine, but when i push to gh-pages i get a 404 console error that it cannot be found. 

<audio ref='themeSong' src="vendor/assets/music/Tetris.mp3" autoPlay loop></audio>

Error:

GET http://myName.github.io/vendor/assets/music/Tetris.mp3 404 (Not Found)

i've tried sourcing it this:

"vendor/assets/music/Tetris.mp3"
"/vendor/assets/music/Tetris.mp3"
"http://github.com/myName/myRepo/vendor/assets/music/Tetris.mp3"
"http://github.com/myName/myRepo/tree/master/vendor/assets/music/Tetris.mp3"

but nothing seems to work.

Solution

  • You can try and reference the raw url

    https://raw.githubusercontent.com/myName/myRepo/master/vendor/assets/music/Tetris.mp3

    Note: a service like rawgit.com mentions:

    When you request a file from raw.githubusercontent.com or gist.githubusercontent.com, GitHub usually serves it (in the case of JavaScript, HTML, CSS, and some other file types) with a Content-Type of text/plain. As a result, most modern browsers won't actually interpret it as JavaScript, HTML, or CSS.

    They do this because serving raw files from a git repo is relatively inefficient, so they want to discourage people from using their GitHub repos for static file hosting.

    RawGit acts as a caching proxy, forwarding requests to GitHub, caching the responses either for a short time (in the case of rawgit.com URLs) or permanently (in the case of cdn.rawgit.com URLs), and relaying them to your browser with the correct Content-Type headers.