Javascript和HTML5音頻播放器歌曲選擇

所以要清楚，我已經在與HTML文件相同的文件夾中的所有音頻文件，我有它播放一首歌曲，但我需要用戶能夠選擇一首歌曲從列表中我相信我的問題是與我的音頻標籤內的源，是的，我知道我正在使用全局變量。是的，我也意識到使用html5內置的音頻控件，我想製作自己的播放和暫停按鈕，而且它們工作正常，但就像我說的我無法更改它，因此用戶可以從列表中選擇一首歌曲。Javascript和HTML5音頻播放器歌曲選擇

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<html> 
<head> 
    <title>Music Player</title> 
    <style> 
     body { 
      background-color: #D1D1D1; 
     } 

     #title { 
      text-align: center; 
     } 

     fieldset { 
      display: block; 
      border: 4px solid black; 
      background-color: #22F4ED; 
      margin-left: auto; 
      margin-right: auto; 
      width: 500px; 
     } 

     #div1 { 
      text-align: center; 
     } 

     table { 
      text-align: center; 
      width: 500px; 
     } 
    </style> 
    <script> 
     var selSong; 
     function check(song) { 
      selSong; 
      var sng = document.getElementById(song); 
      var dropDownSel = sng.options[sng.selectedIndex].value; 
      if (dropDownSel == "selectsong") { 
       alert("Please select a song"); 
      } 
      if (dropDownSel == "AtAGeorgiaCamp-Meeting") { 
       alert("You selected At a Georgia Camp Meeting"); 
       selSong = '"AtAGeorgiaCamp-Meeting.mp3"'; 
      } 
      if (dropDownSel == "GoodByeBroadwayHelloFrance") { 
       alert("You selected Good Bye Broadway, Hello France"); 
       selSong = '"GoodByeBroadwayHelloFrance.mp3"'; 
      } 
      if (dropDownSel == "HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee") { 
       alert("You selected How Ya Gonna Keep Them Down On The Farm After They've Seen Paree"); 
       selSong = '"HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee.mp3"'; 
      } 
      if (dropDownSel == "K-K-K-Katy") { 
       alert("You selected K-K-K-Katy"); 
       selSong = '"K-K-K-Katy.mp3"'; 
      } 
      if (dropDownSel == "OhHowIHateToGetUpInTheMorning") { 
       alert("You selected Oh How I Hate To Get Up In The Morning"); 
       selSong = '"OhHowIHateToGetUpInTheMorning.mp3"'; 
      } 
      if (dropDownSel == "PackUpYourTroublesInYourOldKitBag") { 
       alert("You selected Pack Up Your Troubles In Your Old Kit Bag"); 
       selSong = '"PackUpYourTroublesInYourOldKitBag.mp3"'; 
      } 
      if (dropDownSel == "TwelfthStreetRag") { 
       alert("You selected Twelfth Street Rag"); 
       selSong = '"TwelfthStreetRag.mp3"'; 
      } 
      if (dropDownSel == "YesWeHaveNoBananas") { 
       alert("You selected Yes We Have No Bananas"); 
       selSong = '"YesWeHaveNoBananas.mp3"'; 
       alert(selSong); 
      } 
     } 
    </script> 
</head> 
<body> 
    <h1 id="title">Music Player</h1> 
    <fieldset> 
     <table> 
      <br> 
      <tr> 
       <td> 
        <button type="button" onclick="playAudio('selectedSong');">Play</button> 
       </td> 
       <td> 
        <button type="button" onclick="pauseAudio('selectedSong');">Pause</button> 
       </td> 
      </tr> 
     </table> 
     <div id="div1"> 
      Pick a song: 
      <select id="song" onchange="check('song');"> 
       <option value="selectsong">Select a Song</option> 
       <option value="AtAGeorgiaCamp-Meeting"> 
        At a Georgia Camp 
        Meeting 
       </option> 
       <option value="GoodByeBroadwayHelloFrance"> 
        Good Bye Broadway, Hello 
        France 
       </option> 
       <option value="HowYaGonnaKeepThemDownOnTheFarmAfterTheyveSeenParee"> 
        How 
        Ya Gonna Keep Them Down On The Farm After They've Seen Paree 
       </option> 
       <option value="K-K-K-Katy">K-K-K-Katy</option> 
       <option value="OhHowIHateToGetUpInTheMorning"> 
        Oh How I Hate To Get Up 
        In The Morning 
       </option> 
       <option value="PackUpYourTroublesInYourOldKitBag"> 
        Pack Up Your Troubles 
        In Your Old Kit Bag 
       </option> 
       <option value="TwelfthStreetRag">Twelfth Street Rag</option> 
       <option value="YesWeHaveNoBananas">Yes We Have No Bananas</option> 
      </select> 
     </div> 
    </fieldset> 
    <audio id="selectedSong"> 
     <source src=selSong type="audio/mp3"> 
    </audio> 
    <script> 
     function playAudio(id) { 
      document.getElementById(id).play(); 
     } 
     function pauseAudio(id) { 
      document.getElementById(id).pause(); 
     } 
    </script> 
</body> 
</html>

來源

2015-11-25 Vanhalenfan613

我認爲原因是因爲只有IE瀏覽器可以使用HTML5播放MP3歌曲，嘗試格式的MP3 OGG，做這個轉換，MP3在IE和OGG適用於Chrome，歌劇，Safari瀏覽器，Mozilla瀏覽器等等，也保持mp3格式。

<source src=selSong type="audio/mp3"> 
<source src=selSong type="audio/ogg">

而且你需要添加此（例如），但所有歌曲

selSong = '"TwelfthStreetRag.ogg"';

來源

2015-11-25 18:14:35 JorgeAlberto

我方便有MP3和每首歌曲的OGG版本！嘗試了您的建議，但仍然無效： – Vanhalenfan613

Javascript和HTML5音頻播放器歌曲選擇

回答

相關問題