在新页面中打开媒体，而不是下载(MediaRecorder示例)

Question

我使用此脚本可以从浏览器MediaRecorder示例录制音频

这个脚本创建了一个音频播放器和一个下载链接，但我只想有一个链接在新窗口中打开播放器，而不是下载它。我不知道如何编辑下载链接。

这是我现在拥有的代码：

(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

您的脚本正在设置a标记的download属性，该属性向浏览器指示这是一个下载链接：

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

只需删除此属性即可使其作为正常链接工作。

如果希望在新窗口/选项卡中打开链接(取决于浏览器配置(，请在a标签中添加target属性：

hf.target = '_blank';