HTML5 Audio Control in Duda
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
Best Answers
-
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.
1 -
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
3 -
Yep, you have it correct! :) Share a link when you have it up!
1
Answers
-
Do you have the Full Snippet of Code we can see.. there should be HTML and JS..
0 -
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>
0 -
Maybe @Elizabeth_Fedak can shine some JS superstar light on this..
1 -
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
0 -
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
0 -
Hello,
I have tried using this script, but I cannot get it to autoplay. Everything else works just fine. Can someone help?
This is the script I'm using:
<audio controls autoplay> <source src="{{link}}" type="audio/mpeg"> Your browser does not support the audio element. </audio>Thnak you in advanced!
0 -
Hey @JockamoIPA which browser are you testing the audio script on? Some of the biggest browsers, like Google Chrome and Microsoft Edge, prevent audio from autoplaying in most cases. Source:
0
