HTML5 Audio Control in Duda

Rene
Rene Member Posts: 16

Hi Team,

Duda blog/help states that HTML5 Audio is available as an alternative to using the widget that links to an external audio source:

How To Add Audio to a Website (duda.co)

I uploaded an audio file, entered the code, but the audio file does not play and the control stays "greyed out"/inactive. The code from the above link is pasted below. Does anyone know how to specify the uploaded file correctly OR if it is simply not functional?

<audio controls autoplay>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>


Thanks

R

Tagged:

Best Answers

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 95 MVP
    Answer ✓

    Are you pasting the full url to the audio file in your code? It would be a lot longer than just the name of the file/ what is listed in your example. Like the url you’d use if you went to that file in a different tab in the browser. There’s not a concept of relative links on a Duda site like in an application because all of the files are stored in an S3 bucket. The snippet in the article with JavaScript appeared to just be for adding extra functionality to the HTML snippet from the previous example. In general you might want to use the widget builder and write your own code. The snippets they included were just pasted from third party sites about using HTML and are not specific to Duda. If you write an HTML and JS music widget you can drop the code into an html widget in your Duda site.

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 95 MVP
    Answer ✓

    Hi there,

    I think it is a bit standard to use a fake URL in place of href/src tags in web development, but perhaps some feedback on the confusion would be helpful to the author so they can share a screenshot in other articles. (In my own technical writing I generally would put some text that says "YOUR URL HERE".) I made a quick codepen example of the HTML option with a music URL in place: https://codepen.io/lfedak/pen/WNXYEze

    The audio URL: http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/13.01.mp3

    If you put that into a widget, it'll be like this:

    HTML page:

    <audio controls autoplay>
      <source src="{{link}}" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    

    Content settings:

    Add a text input field with the variable name link.

    When you use the widget, you'll place a full length audio file URL into the text field. (Don't use the link content type in your widget panel, it is meant for a specially formatted link in Duda and requires special Handlebars syntax.)

    You can learn about the widget builder here for preliminary information before getting into the weeds in the forum as it is extremely thorough and has lots of examples!:) https://developer.duda.co/docs/widgets There is also a Duda University course here: https://university.duda.co/building-custom-widgets

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 95 MVP
    Answer ✓

    Yep, you have it correct! :) Share a link when you have it up!

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 342 MVP

    Do you have the Full Snippet of Code we can see.. there should be HTML and JS..

  • Rene
    Rene Member Posts: 16

    The Duda link provided also includes this Java snippet as another alternative to the HTML code above.

    They are saying you can use one or the other. I tried both and neither work for me.

    Thanks

    R

    ===============================================

    <audio controls id="music">

    <source src="mj.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>

     

    <p>Click the buttons to play or pause the music.</p>

     

    <button onclick="play()" type="button">Play </button>

    <button onclick="pause()" type="button">Pause</button>

     

    <script>

    var myMusic= document.getElementById("music");

    function play() {

    myMusic.play();

    }

     

    function pause() {

    myMusic.pause();

    }

    </script>

  • Aj_Cre8
    Aj_Cre8 Member Posts: 342 MVP
  • Rene
    Rene Member Posts: 16

    Thanks a lot, Elizabeth. I am surprised that an example would be included without mention of requiring the URL (or how to make it actually work). I will experiment with a widget hopeful that a proper direct URL will be available.

    Sincere thanks,

    R

  • Rene
    Rene Member Posts: 16

    I totally agree. I will play with widgets. Does this mean that if for some reason I wanted to use the raw HTML without a widget, I would need to use the fully qualified URL to the uploaded file on the Duda site which is using cloud storage...since there is no "relative" file structure to refer to on the site? ...And I shall have no further questions, you honor.

    Thank you for your patience and help.

    R