Audio.js in moodle 3 | how to make it work?

Question

OK, LONG QUESTION IN SHORT: I decided to use audio.js in moodle. I have uploaded file to public_html. And when I add this code to "HEAD":

<script src="https://WWW.MYWEBSITE.COM/audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

And then use default "import media - > audio" on question in moodle quiz (sample code bellow):

<audio controls="true"><source src="https://WWW.MYWEBSITE.COM/learning-base/draftfile.php/5/user/draft/119880121/test.mp3">https://WWW.MYWEBSITE.COM/learning-base/draftfile.php/5/user/draft/119880121/test.mp3</audio>

I can say that simply nothing changes, when preview the results... The player seems not changed at all. Well it had to, right? I want to change the html5 audio player design, this is why I use Audio.js. What am I doing wrong? P.S., I should mention I use the latest moodle 3 (updated to latest few days ago).

---

A complete solution can be found here

Answer 1

There is no way to control the way an audio tag is displayed, each browser does this differently. The download button is only available in chrome for example.

I would recommand using a library that handles the display of audio tags, like audio.js.

Answer 2

As said in the solution to this question, there isn't really a way to disable it. As shown in the answer, what you can do to hide it is increase the width and set the overflow on hidden on the media controls panel.

PS: This would be the case when using Google Chrome.