Is it possible to open a sound file? #22174

LanguageDescriptions · 2018-05-30T16:46:02Z

LanguageDescriptions
May 30, 2018

First, some context: I am a complete newb w.r.t. Git-anything, and not a programmer. I am trying to port some plain vanilla HTML pages (from a dead server), which contain stuff like this:

You can hear this in the word <a href=“001.mp3”>elephant</a>

and when the reader clicks “elephant”, it plays the mp3 file (or at least does what the browser is set to do with an mp3 file). I can’t figure out if there is any translation into Markdown that does this. The following does not work as desired:

You can hear this in the word elephant

This sends the end user to a separate page where they can click a download button or view raw, which will then play the file. Is there a way to cut out some steps, such as directly open the player without the intermediate page; or even, play it in the background or a second tab, while still displaying the main page? (End users will have minimal experience with computers, so simplicity is essential).

Thanks, Dave Odden

Answered by LanguageDescriptions

Jun 1, 2018

Well, never mind. It turns out that if I just open https://Logoori.github.io/WHATEVERFILE.HTML, there’s no need for an HTML preview prefix, and the page works as it’s supposed to. https://github.com/Logoori/Logoori.github.io/blob/master/ seems to have the same stuff as https://Logoori.github.io, but it’s treated differently (as a web page).

View full answer

lee-dohm · 2018-06-01T17:48:36Z

lee-dohm
Jun 1, 2018

Since the MP3 files are in your repository already, you don’t have to link to them via the https://github.com link. You can link to them directly via your Pages site like this:

[elephant](/001.mp3)

That /001.mp3 will be resolved as https://logoori.github.io/001.mp3, which when clicked will play the file in the web browser’s media player. You can click the link in the previous sentence to see it work 😀

(The reason why the https://github.com link doesn’t work the way you want is because we only enable linking of certain file types and force download of all others, such as MP3s, from https://github.com.)

0 replies

LanguageDescriptions · 2018-06-01T18:25:29Z

LanguageDescriptions
Jun 1, 2018
Author

My current question relates to this earlier question. My goal is to create a page where users can click on and listen to word recordings (similar to Forvo.com). My earlier strategy was to use an html anchor (<a href=“002.mp3”>play</a>"), but probably most users (no-tech) will be using phones and this won’t usually or ever work, since browsers will at best offer to download the file. I somewhat sorted out how to use HTML5 and Java to play sounds, and a simple example is at https://github.com/Logoori/Logoori.github.io/blob/master/4TestJS.htm. It works if I open it locally on my computer.

I tried to open the same thing via https://htmlpreview.github.io/?https://github.com/Logoori/Logoori.github.io/blob/master/4TestJS.htm, and it displays correctly, but it does not play. The code inside that file is

click <audio id="ID004" source src="004.mp3"></audio><button onclick="playAudio('ID004')" type="button">play4</button> and then <audio id="ID003" source src="003.mp3"></audio><button onclick="playAudio('ID003')" type="button">play3</button>
<script>
function playAudio(audio_element) {
	var x = document.getElementById(audio_element);
	x.play();
}
</script>

I’m trying to figure out why it won’t work. One possible answer is that I’m trying to do something forbidden, and I should stop trying. :mansad: Another thing that I thought of is that I just don’t understand how this html preview thing works, and I’m thinking about this the wrong way. If anyone has any suggestions, that would be highly appreciated.

0 replies

lee-dohm · 2018-06-01T18:49:24Z

lee-dohm
Jun 1, 2018

Since this is an extension of the original question, it should just be another post on the same topic so that people can get all the details. I’ve gone ahead and merged the topics for you 😀

0 replies

LanguageDescriptions · 2018-06-01T21:34:20Z

LanguageDescriptions
Jun 1, 2018
Author

Well, never mind. It turns out that if I just open https://Logoori.github.io/WHATEVERFILE.HTML, there’s no need for an HTML preview prefix, and the page works as it’s supposed to. https://github.com/Logoori/Logoori.github.io/blob/master/ seems to have the same stuff as https://Logoori.github.io, but it’s treated differently (as a web page).

0 replies

vovs03 · 2019-12-19T08:12:09Z

vovs03
Dec 19, 2019

404

#404
#NotAvailable
#PageNotFound

Please update link to solution

0 replies

LanguageDescriptions · 2019-12-19T16:42:04Z

LanguageDescriptions
Dec 19, 2019
Author

I dunno if I can rescind a “solution”. At some later point, the system changed and now it does not work. I suspect the code relied on an unofficial Java quirk. So it doesn’t work anymore, and I’ve abandoned the project for a while.

0 replies

Quacker7 · 2020-05-05T17:09:46Z

Quacker7
May 5, 2020

Could anyone help me out w/ this? I’m a very amateur coder looking to create my own little soundboard.

I have the “daft” file as an mp3 on my desktop, but can’t get it onto my website. any help is welcomed! Thanks so much!

0 replies

noskol-dev · 2020-06-27T07:43:23Z

noskol-dev
Jun 27, 2020

I found a way to play audio in github pages

Code:

<!--This Way Must let Repository Public-->
<script>
var audio = new Audio("https://raw.githubusercontent.com/USERNAME/REPOSITORY/BRANCH/Audio.mp3")
audio.play()
</script>

2 replies

Tyler-Hilbert Jan 18, 2024

Does this still work? I'm trying this (as of January 2024) and I'm getting a
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
error

<script>
    var audio = new Audio("https://raw.githubusercontent.com/Tyler-Hilbert/3D-Printed-Guitars/main/sound.mp3")
    audio.play()
</script>

https://github.com/Tyler-Hilbert/3D-Printed-Guitars/tree/d63e903165634ed3b9dee4263ef1bcd12bb588ce

Tyler-Hilbert Jan 18, 2024

<script>
  var hasPlayed = false;
  var audio = new Audio(
    "https://raw.githubusercontent.com/Tyler-Hilbert/3D-Printed-Guitars/main/sound.mp3"
  );
  function playAudio() {
    // This func will check if the file hasPlayed and then will disable after first interaction.
    if (!hasPlayed) {
      audio.play();
      hasPlayed = true;
    }
  }
  document.addEventListener("click", playAudio);
</script>

@atorrez007 came up with this solution
Tyler-Hilbert/3D-Printed-Guitars@2397581

LanguageDescriptions · 2020-12-19T19:44:18Z

LanguageDescriptions
Dec 19, 2020
Author

I sorted out the problem, so here’s a restatement of the problem and the solution. The problem was caused by bad Java. Originally, the page executed the following script:

<script>function playAudio(audio_element) {var x = document.getElementById(audio_element); x.play();}</script>

It was then invoked via

<audio id="ABC" source src="ABC.wav"></audio><button onclick="playAudio('ABC')" type="button">play</button>

This worked, then stopped working. The solution (d’oh!) is: take out source.

<audio id="ABC" src="ABC.wav"></audio><button onclick="playAudio('ABC')" type="button">play</button>

On various PCs, the defective code has always worked; so it’s not completely unrelated to GitHub pages, but it was basically a Java problem.

0 replies

jonnyhotchkiss · 2023-11-19T14:04:25Z

jonnyhotchkiss
Nov 19, 2023

First page opened whilst looking for how to play github wav and other audio stuff from within the browser, vaguely recall seeing a chrome extension to play stuff in / from github, but then skimming this discussion made me think maybe the browser.console can be used to play resources.

Example: https://github.com/kennethreitz/infinite-state-sample-pack/blob/master/Loops/Awaken_116/loop.wav

Then I read further and learned how assets can be played by referencing relative link...
So this mentions a .io site and github pages, but I'm wondering if either

the same can be achieved, without using pages, eg a github repo with a readme markdown that has links to resources in the repo (.wav, .mp3 etc) that can be clicked to be played (this may already exist)
(if pages are recommended or required) a workflow that creates the page that accompanies a commit
(unlimited third-party online storage?) a workflow that uploads a resource to a host like soundcloud (which ever has the best policy, eg closest to free unlimited) and get the link and creates a page that references this

braindump on options for "using sounds in and on github" 📌

I asked my GPT thing (OpenAI: Ctrl Altman Del 😂)

GitHub Direct Link:
Use the raw.githubusercontent.com link to get the direct link to the audio file. In your case, the direct link would be:

https://raw.githubusercontent.com/kennethreitz/infinite-state-sample-pack/master/Loops/Awaken_116/loop.wav
Online Audio Player:
Use an online audio player that allows you to input a direct link to an audio file. There are various options available, and one popular choice is OnlineAudioConverter. Here's how you can use it:

Visit OnlineAudioConverter.
Click on "Open URL" or a similar option.

So currently a multi-tab setup to drag /drop my work, but even that's more clunk than I'd like...
I may be missing several obvious things here, a like OP am not a dev or git-jedi (my google-fu is quite strong though:)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Is it possible to open a sound file? #22174

{{title}}

Replies: 10 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Is it possible to open a sound file? #22174

Replies: 10 comments · 2 replies

LanguageDescriptions Jun 1, 2018 Author

LanguageDescriptions Jun 1, 2018 Author

404

LanguageDescriptions Dec 19, 2019 Author

LanguageDescriptions Dec 19, 2020 Author

Replies: 10 comments 2 replies

LanguageDescriptions
Jun 1, 2018
Author

LanguageDescriptions
Jun 1, 2018
Author

LanguageDescriptions
Dec 19, 2019
Author

LanguageDescriptions
Dec 19, 2020
Author