how to play a mediaStream object in javascript

Question

i have a mediaStream object from a webrtc peer, and would like to play it. Im sending the stream from the other end from an online source e.g "http://songs.ca/track1.mp3" I get this MediaStream Object:

MediaStream { id: "{3ac77543-657a-4b31-a490-8e6811d96fec}", active: true, onaddtrack: null, onremovetrack: null }
​
active: true
​
id: "{3ac77543-657a-4b31-a490-8e6811d96fec}"
​
onaddtrack: null
​
onremovetrack: null
​
<prototype>: MediaStreamPrototype { getAudioTracks: getAudioTracks(), getVideoTracks: getVideoTracks(), getTracks: getTracks(), … }
​​
active: 
​​
addTrack: function addTrack()
​​
clone: function clone()
​​
constructor: function ()
​​
getAudioTracks: function getAudioTracks()
​​
getTrackById: function getTrackById()
​​
getTracks: function getTracks()
​​
getVideoTracks: function getVideoTracks()
​​
id: 
​​
onaddtrack: 
​​
onremovetrack: 
​​
removeTrack: function removeTrack()
​​
Symbol(Symbol.toStringTag): "MediaStream"
​​
<get active()>: function active()
​​
<get id()>: function id()
​​
<get onaddtrack()>: function onaddtrack()
​​
<set onaddtrack()>: function onaddtrack()
​​
<get onremovetrack()>: function onremovetrack()
​​
<set onremovetrack()>: function onremovetrack()
​​
<prototype>: EventTargetPrototype { addEventListener: addEventListener(), removeEventListener: removeEventListener(), dispatchEvent: dispatchEvent(), … }

how can I listen to audio from this?

I cant seem to play this media stream, I've isolated the code to just produce a media stream and play it

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
var ans = "http://live.hbstreaming.com:2370/stream"
document.getElementById("plyaudi").setAttribute('src', `${ans}`);
const audioElement = document.querySelector('audio');
const track = audioCtx.createMediaElementSource(audioElement);
var destination = audioCtx.createMediaStreamDestination()
track.connect(destination);
console.log(destination.stream)

const playButton = document.querySelector('.btn');

playButton.addEventListener('click', function() {
    if (audioCtx.state === 'suspended') {
        audioCtx.resume();
    }
    
    const audio = new Audio();
    audio.autoplay = true;
    audio.srcObject = destination.stream
}, false);

it still doesnt work

Answer 1

You can create an audio element and assign your MediaStream as the srcObject. There are several ways to do this; here is one example:

const audio = new Audio();
audio.autoplay = true;
audio.srcObject = mediaStream;