Menu
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.
558
Upload Files to GithubClick the Upload Files files button and begin uploading files. You can drag one or more files from the desktop and then click Commit Changes to publish the files on the web. Github will accept any file as long as the size is within the 25 MB limit.
Add a description, image, and links to the upload-audio topic page so that developers can more easily learn about it.
GitHub Pages is a great way to host some of your content online. All you need to do is to write some markdown files and tell GitHub to create it as a page. The problem is that you can't just add some HTML into your markdown to – for example – embed a YouTube video.
Under your repository name, click Settings. In the "Code and automation" section of the sidebar, click Pages. Under "Build and deployment", under "Source", select Deploy from a branch. Under "Build and deployment", under "Branch", use the None or Branch drop-down menu and select a publishing source.
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.comorgist.githubusercontent.com, GitHub usually serves it (in the case of JavaScript, HTML, CSS, and some other file types) with aContent-Typeoftext/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.comURLs) or permanently (in the case ofcdn.rawgit.comURLs), and relaying them to your browser with the correctContent-Typeheaders.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
