Audio Stream by User Input

JavaScript
1

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.

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>

2

I tried adding an actual audio stream link into the source tag

<source src="http://ice3.somafm.com/groovesalad-256-mp3" type="audio/mpeg">

and it worked.

You will have to use some JS to plug the input text field into the src attribute.

3

Something kinda like…
https://codepen.io/Xiija/pen/aPLypr?editors=1010

4

Yes this does work for me.

5

How would the code be written without jquery?

6 
let player = document.querySelector("#player");  player.src = text;
1 Like
7

Trying to reply through a fireTV is a special kind of hell…

1 Like
8

How would the code be written without jquery?

document.querySelector('#sent').addEventListener('click', (e) => {
  const val = document.querySelector('#example');
  const mp = document.querySelector('#player');
  mp.src = val.value;
});
1 Like
9

What if I set it up this way? @snowmonkey

Can this be improved at all, and is it set up right?
https://jsfiddle.net/xnwr5jeq/88/

html

<audio controls></audio>

<div class="control">
  <form>
    <label class="label">Stream</label>
    <input class="input" name="url" />
    <input type="submit" value="Set">
  </form>
</div>

Javascript

document.addEventListener('DOMContentLoaded', (evt) => {
  document.querySelector('form').addEventListener('submit', (evt) => {
    const formData = new FormData(evt.target);
    document.querySelector('audio').src = formData.get('url');
    evt.preventDefault();
  });
});

10

I just figured this out:

This was the other way.
https://jsfiddle.net/9ab80c56/9/

<audio controls class="player">
</audio>
<div class="control">
  <label class="label">Stream</label>
  <input class="example">
  <input class="sent" type="submit" value="Set">
</div>

<br> add this link, hit set:
<br> http://hi5.1980s.fm/;

<script>
  document.querySelector('.sent').addEventListener('click', (e) => {
    const val = document.querySelector('.example');
    const mp = document.querySelector('.player');
    mp.src = val.value;
  });

</script>
1 Like
11

Were you suggesting a different way to do it here?

How would it have been set up using this?

let player = document.querySelector("#player"); player.src = text;

12

I have a question:

How would I get this button to work in the code?
https://jsfiddle.net/xnwr5jeq/114/

  <button class="style" onclick="document.querySelector('.player');player.paused ? player.play() : player.pause()">Play / Pause</button>

I got it to work using 2 buttons here:
https://jsfiddle.net/xnwr5jeq/110/

  <button class="style" onclick="document.querySelector('.player').play()">Play</button>
  <button class="style" onclick="document.querySelector('.player').pause()">Pause</button>

But how would I get it to work using only 1 button for Play & Pause?