Открывать медиа на новой странице вместо загрузки (MediaRecorder-sample)

Question

Я использую этот сценарий для записи звука из браузера MediaRecorder-sample

Этот сценарий создает аудиоплеер, а также ссылку для скачивания, но я хочу только ссылка, чтобы открыть плеер в новом окне вместо его загрузки. Я не уверен, как редактировать ссылку для скачивания.

Это код, который у меня есть сейчас:

(HTML)

<div id='btns'>
    <div class="player">
      <button  class="btn btn-default" id='start'>start</button>
      <button  class="btn btn-default" id='stop'>stop</button>
      <button  class="btn btn-default" id='play'>play</button>
    </div>
</div>
<div>
  <ul  class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

(CSS)

#start {
    height: 81px;
    width: 81px;
    background: url(images/rec-but.png) #C39 no-repeat;
    border: none;
}

#stop {
    height: 81px;
    width: 81px;
    background: url(images/pause-but.png) #C63 no-repeat;
    border: none;
}

#play {
    height: 81px;
    width: 81px;
    background: url(images/play-but.png) #900 no-repeat;
    border: none;
}

#play img {
    position: relative;
    left: -6px;
    top: -1px;
}

.player span {
        height: 81px;
    width: 81px;
    background: url(images/play-but.png) #699 no-repeat;
    border: solid 2px #F00;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    /*top: -65px;*/
    top: -32px;
    left: -1px;
}

.player span a {
    display: inline-block;
    width: 81px;
    height: 81px;
    text-indent: -9999px;
}

.player {
    width: 267px;
    height: 98px;
    margin: 0 auto;
    background: url(images/playr-bg.png) #003 no-repeat;
    text-align: center;
    padding-top: 8px;
}

(JS)

'use strict'

let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter=1,
  chunks,
  media;


onload = e => {
  let mv = id('mediaVideo'),
      mediaOptions = {
        audio: {
          tag: 'audio',
          type: 'audio/ogg',
          ext: '.ogg',
          gUM: {audio: true}
        }
      };
  media =  mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
    stream = _stream;
    id('btns').style.display = 'inherit';
    start.removeAttribute('disabled');
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = e => {
      chunks.push(e.data);
      if(recorder.state == 'inactive')  makeLink();
    };
    log('got media successfully');
  }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  document.getElementById('start').style.backgroundImage = "url(images/rec-but-active.png)";
  stop.removeAttribute('disabled');
  chunks=[];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  document.getElementById('start').style.backgroundImage = "url(images/rec-but.png)";
  start.removeAttribute('disabled');
}



function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
    , url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , hf = document.createElement('a')
  ;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `${hf.download}`;

  var emptyPlay = document.querySelector('#play');

    var newPlay = document.createElement('span');
    newPlay.appendChild(hf);
    hf.innerHTML = `${hf.download}`;

    emptyPlay.replaceWith(newPlay);

}

Любая помощь будет оценена

Answer 1

Ваш скрипт устанавливает атрибут download тега a, который указывает браузеру, что это ссылка для скачивания:

hf.download = `${counter++}${media.ext}`;

Просто удалите этот атрибут, чтобы он работал как обычно ссылка.

Если вы хотите, чтобы ссылка открывалась в новом окне / вкладке (зависит от конфигурации браузера), добавьте атрибут target в тег a:

hf.target = '_blank';