使用 JavaScript 创建音乐播放器

Posted 2023-02-25

【中文标题】使用 JavaScript 创建音乐播放器

【英文标题】：Creating a music player with JavaScript

【发布时间】：2018-11-15 23:49:41

【问题描述】：

我正在尝试创建一个音乐播放器。 我的 html 代码是：

<div id="main">
       <div id="list"  draggable="true">

       </div>

       <div id="player">
         <div id="buttons">

           <button id="pre" onclick="pre()"><img src="images/pre.png"  ></button>
           <button id="play" onclick="playAudio()"><img src="images/play.png"  ></button>
           <button id="next" onclick=" next()"><img src="images/next.png"  ></button>
           <input type="file" id="file" name="file" multiple ="multiple" style=" display : none ;">
           <button id="browse"><img src="images/browse.jpg"  ></button>
           <button id="unmute"><img src="images/unmute.png"  ></button>

         </div>
         <div id="seekbar">
           <div id="fill"></div>
           <div id="handle"></div>
         </div>
       </div>

     </div> 

我的 javascript 是：

// Browse button
      $("#browse").on("click", function() 
              $("input").trigger("click");
       );

    // Append the music   
      $("#file").change(function() 
      var result = $(this)[0].files;
      for(var i = 0 ; i< result.length ; i++)
       var file = result[i];
       // here are the files
         $("#list").append("<p id='first'>" + file.name + " (TYPE: " + file.type + ", SIZE: " + file.size + " ) </p>");  

    
    );

    // play the music

    $("#list").on( "click" , "#first" , function()
        console.log(song );

    );


var songs = document.getElementById("list") ;

var song = new Audio();
var currentSong = 0 ;

$("#list").on( "click" , "#first" , function()
        playSong();
        );

 window.onload = playSong ;

function playSong() 
    song.src = songs[currentSong];

    song.play();
;

我想将音乐附加到（id = list 的 div），然后当我点击音乐时，播放它但它不起作用并给我这个错误 :: Uncaught (in promise) DOMException: Failed to load because未找到支持的来源。

谁能帮帮我！！！？？？

【问题讨论】：

我看不到任何实际加载任何媒体文件的地方。您遇到的错误反映了这一点。

Song.src 指向 HTMLELEMENT 对象。 src 应该是文件名。除非 div 的文本内容是文件名

Play audio local file with html的可能重复

songs[currentSong] 未定义，因为songs 不是保存本地文件的数组，而是<div> 元素。

首先我有这个错误：index.html:94 Uncaught (in promise) DOMException: play() failed 因为用户没有首先与文档交互。当我加载音乐并单击它时出现此错误： Uncaught (in promise) DOMException: Failed to load because no supported source was found。 @RickCalder

【参考方案1】：

存档您实际描述的内容的最佳方法是将您的音频网址放入一个数组中。就像下面的代码一样：

let song_list = new Array(); // Contains Audio URLs 
let current_song = 0;
let player = new Audio();
player.src = song_list[current_song];

function playSong()
    player.play();


function pauseSong()
    player.pause();


function nextSong()
    player.pause();
    player.src = song_list[++current_song];
    player.onload = ()=>
          player.play(); 
    ;

请记住，自动播放不起作用。您至少需要与网站交互才能真正听到音频（至少在 Google Chrome 上或在所有运行 V8 的浏览器上更清晰）。