A tip to play audio (and video) in a browser

So, the teacher in the house, aka my wife, asked me to help with the online teaching she has to do specifically with being able to play audio tracks for her students.

She uses Fedora on her laptop and Firefox as the browser. All of the online tools that the institution uses works just fine. She is able to share presentations, tabs from browsers showing websites etc. The one challenge she encountered was in playing some audio files that are on her laptop.

For some reason that online platform is not able to pick up the VLC player that will be playing the audio and shared to her students. Did not matter what audio tool was used (Totem, Audacity (yes, that’s an overkill)), that window was not showing up as being shareable. It could be something to do Wayland being used, but I did not want that to be the issue and that it should work everywhere.

So, a simple hack. In the directory where the audio tracks are kept that she wants to play, I just added a index.html with the following:

<!DOCTYPE html>
<html>
<body>

<p> Track 1
<audio controls>
<source src=”Track 1.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 2
<audio controls>
<source src=”Track 2.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 3
<audio controls>
<source src=”Track 3.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 4
<audio controls>
<source src=”Track 4.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 5
<audio controls>
<source src=”Track 5.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 6
<audio controls>
<source src=”Track 6.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 7
<audio controls>
<source src=”Track 7.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 8
<audio controls>
<source src=”Track 8.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 9
<audio controls>
<source src=”Track 9.wav” type=”audio/wav”>
</audio>
</p>

<p> Track 10
<audio controls>
<source src=”Track 10.wav” type=”audio/wav”>
</audio>
</p>

</body>
</html>

That’s it. She can use “file::///home/user/tracks/index.html” in a tab and have that tab’s output be sent to her students in the session. Job done.

Her other colleagues have the same issue as well, but they are using other cloud services to do this. A simple hack is all you need. Yes, she is sharing it with them and now that this has been documented here, the world can benefit. And, yes, you can play video as well. Kudos to w3schools.com for this and HTML5.

Leave a Reply