Audio Stream by User Input

How would I be able to set this up where the audio stream isn’t hard coded, and where a user would be able to input the stream themselves?

This is something I wanted to do, but haven't figured out how to do it.

Code:
https://jsfiddle.net/xnwr5jeq/6/

<audio controls>

 <source src="" type="audio/mpeg">

</audio>



<div class="control">

  <label class="label">Stream</label>

  <input class="input" type="text" />

</div>

Image

asked Dec 28 '18 at 19:31

Michelle Smith

336

You mean, the source URL?

– Brad
Dec 28 '18 at 21:09

add a comment |

How would I be able to set this up where the audio stream isn’t hard coded, and where a user would be able to input the stream themselves?

This is something I wanted to do, but haven't figured out how to do it.

Code:
https://jsfiddle.net/xnwr5jeq/6/

<audio controls>

 <source src="" type="audio/mpeg">

</audio>



<div class="control">

  <label class="label">Stream</label>

  <input class="input" type="text" />

</div>

Image

asked Dec 28 '18 at 19:31

Michelle Smith

336

You mean, the source URL?

– Brad
Dec 28 '18 at 21:09

add a comment |

How would I be able to set this up where the audio stream isn’t hard coded, and where a user would be able to input the stream themselves?

This is something I wanted to do, but haven't figured out how to do it.

Code:
https://jsfiddle.net/xnwr5jeq/6/

<audio controls>

 <source src="" type="audio/mpeg">

</audio>



<div class="control">

  <label class="label">Stream</label>

  <input class="input" type="text" />

</div>

Image

asked Dec 28 '18 at 19:31

Michelle Smith

336

How would I be able to set this up where the audio stream isn’t hard coded, and where a user would be able to input the stream themselves?

This is something I wanted to do, but haven't figured out how to do it.

Code:
https://jsfiddle.net/xnwr5jeq/6/

<audio controls>

 <source src="" type="audio/mpeg">

</audio>



<div class="control">

  <label class="label">Stream</label>

  <input class="input" type="text" />

</div>

Image

input html5-audio audio-streaming

asked Dec 28 '18 at 19:31

Michelle Smith

336

asked Dec 28 '18 at 19:31

Michelle Smith

336

asked Dec 28 '18 at 19:31

Michelle Smith

336

asked Dec 28 '18 at 19:31

Michelle Smith

336

asked Dec 28 '18 at 19:31

Michelle Smith

336

You mean, the source URL?

– Brad
Dec 28 '18 at 21:09

add a comment |

You mean, the source URL?

– Brad
Dec 28 '18 at 21:09

You mean, the source URL?

– Brad
Dec 28 '18 at 21:09

add a comment |

1 Answer
1

active

oldest

votes

First, let's make this a form. Forms are the standard way to encapsulate a collection of input boxes. They're well understood by normal browsers, but also by screen readers and what not.

<form>

  <label>

    Stream

    <input name="url" type="url" />

  </label>

</form>

This is similar to what you had, but I made a few changes:

<label> elements need to either wrap what they're labeling, or the they need the for attribute. Otherwise, they're not very useful.

I dropped the label class. You can style this in CSS without it by simply using label as the selector.

I set a name for the input to make it easier to get its value later.

The input is now of type url. This has some built-in validation, and will fall back to a regular text input if the browser doesn't support it.

Your audio element is fine, but let's re-work it a bit:

<audio src=""></audio>

Basically, since we're only getting a single URL from the user, there's no need for child source elements. We also shouldn't set the type because we don't know what it's going to be.

Now, to directly answer your question... we handle the form submit with JavaScript.

// Ensure the page is loaded before querying for elements to attach handlers to

document.addEventListener('DOMContentLoaded', (e) => {

  // Get the form, add a submit handler

  document.querySelector('form').addEventListener('submit', (e) => {

    // Get the form values from the form that was just submitted

    const formData = new FormData(e.target);



    // Set the audio `src` attribute from the form's `url` field input value

    document.querySelector('audio').src = formData.get('url');



    // Prevent default form handling (which would reload the page, in this case)

    e.preventDefault();

  });

});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

answered Dec 28 '18 at 21:20

Brad

114k27228389

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53963460%2faudio-stream-by-user-input%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

First, let's make this a form. Forms are the standard way to encapsulate a collection of input boxes. They're well understood by normal browsers, but also by screen readers and what not.

<form>

  <label>

    Stream

    <input name="url" type="url" />

  </label>

</form>

This is similar to what you had, but I made a few changes:

<label> elements need to either wrap what they're labeling, or the they need the for attribute. Otherwise, they're not very useful.

I dropped the label class. You can style this in CSS without it by simply using label as the selector.

I set a name for the input to make it easier to get its value later.

The input is now of type url. This has some built-in validation, and will fall back to a regular text input if the browser doesn't support it.

Your audio element is fine, but let's re-work it a bit:

<audio src=""></audio>

Basically, since we're only getting a single URL from the user, there's no need for child source elements. We also shouldn't set the type because we don't know what it's going to be.

Now, to directly answer your question... we handle the form submit with JavaScript.

// Ensure the page is loaded before querying for elements to attach handlers to

document.addEventListener('DOMContentLoaded', (e) => {

  // Get the form, add a submit handler

  document.querySelector('form').addEventListener('submit', (e) => {

    // Get the form values from the form that was just submitted

    const formData = new FormData(e.target);



    // Set the audio `src` attribute from the form's `url` field input value

    document.querySelector('audio').src = formData.get('url');



    // Prevent default form handling (which would reload the page, in this case)

    e.preventDefault();

  });

});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

answered Dec 28 '18 at 21:20

Brad

114k27228389

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

add a comment |

First, let's make this a form. Forms are the standard way to encapsulate a collection of input boxes. They're well understood by normal browsers, but also by screen readers and what not.

<form>

  <label>

    Stream

    <input name="url" type="url" />

  </label>

</form>

This is similar to what you had, but I made a few changes:

<label> elements need to either wrap what they're labeling, or the they need the for attribute. Otherwise, they're not very useful.

I dropped the label class. You can style this in CSS without it by simply using label as the selector.

I set a name for the input to make it easier to get its value later.

The input is now of type url. This has some built-in validation, and will fall back to a regular text input if the browser doesn't support it.

Your audio element is fine, but let's re-work it a bit:

<audio src=""></audio>

Basically, since we're only getting a single URL from the user, there's no need for child source elements. We also shouldn't set the type because we don't know what it's going to be.

Now, to directly answer your question... we handle the form submit with JavaScript.

// Ensure the page is loaded before querying for elements to attach handlers to

document.addEventListener('DOMContentLoaded', (e) => {

  // Get the form, add a submit handler

  document.querySelector('form').addEventListener('submit', (e) => {

    // Get the form values from the form that was just submitted

    const formData = new FormData(e.target);



    // Set the audio `src` attribute from the form's `url` field input value

    document.querySelector('audio').src = formData.get('url');



    // Prevent default form handling (which would reload the page, in this case)

    e.preventDefault();

  });

});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

answered Dec 28 '18 at 21:20

Brad

114k27228389

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

add a comment |

First, let's make this a form. Forms are the standard way to encapsulate a collection of input boxes. They're well understood by normal browsers, but also by screen readers and what not.

<form>

  <label>

    Stream

    <input name="url" type="url" />

  </label>

</form>

This is similar to what you had, but I made a few changes:

<label> elements need to either wrap what they're labeling, or the they need the for attribute. Otherwise, they're not very useful.

I dropped the label class. You can style this in CSS without it by simply using label as the selector.

I set a name for the input to make it easier to get its value later.

The input is now of type url. This has some built-in validation, and will fall back to a regular text input if the browser doesn't support it.

Your audio element is fine, but let's re-work it a bit:

<audio src=""></audio>

Basically, since we're only getting a single URL from the user, there's no need for child source elements. We also shouldn't set the type because we don't know what it's going to be.

Now, to directly answer your question... we handle the form submit with JavaScript.

// Ensure the page is loaded before querying for elements to attach handlers to

document.addEventListener('DOMContentLoaded', (e) => {

  // Get the form, add a submit handler

  document.querySelector('form').addEventListener('submit', (e) => {

    // Get the form values from the form that was just submitted

    const formData = new FormData(e.target);



    // Set the audio `src` attribute from the form's `url` field input value

    document.querySelector('audio').src = formData.get('url');



    // Prevent default form handling (which would reload the page, in this case)

    e.preventDefault();

  });

});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

answered Dec 28 '18 at 21:20

Brad

114k27228389

First, let's make this a form. Forms are the standard way to encapsulate a collection of input boxes. They're well understood by normal browsers, but also by screen readers and what not.

<form>

  <label>

    Stream

    <input name="url" type="url" />

  </label>

</form>

This is similar to what you had, but I made a few changes:

<label> elements need to either wrap what they're labeling, or the they need the for attribute. Otherwise, they're not very useful.

I dropped the label class. You can style this in CSS without it by simply using label as the selector.

I set a name for the input to make it easier to get its value later.

The input is now of type url. This has some built-in validation, and will fall back to a regular text input if the browser doesn't support it.

Your audio element is fine, but let's re-work it a bit:

<audio src=""></audio>

Basically, since we're only getting a single URL from the user, there's no need for child source elements. We also shouldn't set the type because we don't know what it's going to be.

Now, to directly answer your question... we handle the form submit with JavaScript.

// Ensure the page is loaded before querying for elements to attach handlers to

document.addEventListener('DOMContentLoaded', (e) => {

  // Get the form, add a submit handler

  document.querySelector('form').addEventListener('submit', (e) => {

    // Get the form values from the form that was just submitted

    const formData = new FormData(e.target);



    // Set the audio `src` attribute from the form's `url` field input value

    document.querySelector('audio').src = formData.get('url');



    // Prevent default form handling (which would reload the page, in this case)

    e.preventDefault();

  });

});

Fiddle: https://jsfiddle.net/xnwr5jeq/7/

answered Dec 28 '18 at 21:20

Brad

114k27228389

answered Dec 28 '18 at 21:20

Brad

114k27228389

answered Dec 28 '18 at 21:20

Brad

114k27228389

answered Dec 28 '18 at 21:20

Brad

114k27228389

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

add a comment |

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

I think you're missing this: type="submit" value="Set"> Right???? jsfiddle.net/xnwr5jeq/16

– Michelle Smith
Dec 29 '18 at 0:05

@MichelleSmith I was just pushing enter, but yes, you could add a submit button if you wanted.

– Brad
Dec 29 '18 at 0:09

How would I be able to get it to work with this code? jsfiddle.net/aohz8ns6/20

– Michelle Smith
Dec 29 '18 at 0:30

@MichelleSmith How would you be able to get what to work with that code? Post a new question with just the relevant code needed to reproduce the problem you're having. You have a ton of extraneous code in that fiddle that you don't need.

– Brad
Dec 29 '18 at 0:32

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk