亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我想創建一個按鈕,僅使用 HTML、CSS 和 JavaScript 將音樂文件從用戶計算機加載到

我想創建一個按鈕,僅使用 HTML、CSS 和 JavaScript 將音樂文件從用戶計算機加載到

波斯汪 2023-11-02 17:28:24
我顯然有更多代碼,但我只是想知道我應該做什么,所以我不會把它們全部放進去。  <!doctype html><html><head>  <meta charset="utf-8">  <title>PlayBackingTracks</title>      </head><body>     </body></html>
查看完整描述

1 回答

?
MMMHUHU

TA貢獻1834條經驗 獲得超8個贊

您在示例中沒有提供太多可使用的內容,但我創建了一個可能有幫助的代碼片段。


運行下面的代碼片段:


//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>


查看完整回答
反對 回復 2023-11-02
  • 1 回答
  • 0 關注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號