TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
您在示例中沒有提供太多可使用的內(nèi)容，但我創(chuàng)建了一個(gè)可能有幫助的代碼片段。
運(yùn)行下面的代碼片段：
//declare elements as vars
var audioUpload = document.getElementById("file");
var audioLink = document.getElementById('audioLink');
var audioSource = document.getElementById("audioSource");
var audioControl = document.getElementById('audio');
//attach event listener to audioUpload input
audioUpload.addEventListener("change", function() {
uploadAudio(this);
});
//function that will upload audio
function uploadAudio(input) {
var reader;
if (input.files && input.files[0]) {
reader = new FileReader();
reader.onload = function(e) {
audioLink.setAttribute('data-value', e.target.result);
audioLink.innerHTML = "Click to play"
}
reader.readAsDataURL(input.files[0]);
}
}
//function that will play audio after clicking link
function play(element) {
audioSource.src = element.getAttribute('data-value');
audioControl.load();
audioControl.play();
};
<p>Upload your audio file:</p>
<input type="file" id="file">
<br/><br/>
<div>
<a id="audioLink" href="#" onclick="play(this)" data-value=""></a>
</div>
<br/><br/>
<audio controls="controls" id="audio">
<source id="audioSource" src=""></source>
</audio>
舉報(bào)