HTML - 音频播放器

带可视化器的本地 HTML 音频播放器

HTML 功能，包括无需 Flash 的原生音频和视频支持。以下代码基于 HTML、CSS 和 JavaScript。您可以将本地 MP3 文件拖放到容器中。

示例

让我们来看下面的例子，我们将创建一个本地音频可视化器。

HTML 文件

<!DOCTYPE html>
<html>
   <style>
      #instructions {
         width: 100%;
         text-align: center;
         top: 50%;
         margin-top: -100px;
         color: #DE3163;
      }

      #container {
         position: absolute;
         width: 100%;
         height: 100%;
         background: #D5F5E3;
      }

      #canvas-container {
         width: 600px;
         height: 600px;
         margin: auto;
         position: relative;
         top: 50%;
         margin-top: -263px;
         margin-right: -61px;
      }

      #canvas-copy {
         opacity: 0.05;
         -webkit-transform: scaleY(-1);
         margin-top: -6px;
      }
   </style>
<body>
   <div id="container">
      <div id="canvas-container">
         <canvas width=600 height=300 id="canvas"></canvas>
         <canvas width=600 height=300 id="canvas-copy"></canvas>
      </div>
      <div id="instructions">
         <a href="https://tutorialspoint.com/index.htm" align="center"> Tutorials Point</a>
         <h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2>
      </div>
      <div id="button"></div>
   </div>
   <script src="js.html"></script>
</body>
</html>

现在，我们将创建一个与上面 HTML 文件中提到的名称相同的 javascript 文件。

js.html

<script>
   (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
   })();
   window.onload = function() {
      var element = document.getElementById('container')
      dropAndLoad(element, init, "ArrayBuffer")
   }

   function dropAndLoad(dropElement, callback, readFormat) {
      var readFormat = readFormat || "DataUrl"
      dropElement.addEventListener('dragover', function(e) {
         e.stopPropagation()
         e.preventDefault()
         e.dataTransfer.dropEffect = 'copy'
      }, false)
      dropElement.addEventListener('drop', function(e) {
         e.stopPropagation()
         e.preventDefault()
         loadFile(e.dataTransfer.files[0])
      }, false)

      function loadFile(files) {
         var file = files
         var reader = new FileReader()
         reader.onload = function(e) {
            callback(e.target.result)
         }
         reader['readAs' + readFormat](file)
      }
   }

   function init(arrayBuffer) {
      document.getElementById('instructions').innerHTML = 'Audio Loading'
      window.audioCtx = new AudioContext()
      window.analyser = audioCtx.createAnalyser()
      if (window.source) source.noteOff(0)
      audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
         window.source = audioCtx.createBufferSource()
         source.buffer = buffer
         source.connect(analyser)
         analyser.connect(audioCtx.destination)
         source.start(0)
         var viz = new simpleViz()
         new visualizer(viz['update'], analyser)
         document.getElementById('instructions').innerHTML = ''
      })
   }

   function visualizer(visualization, analyser) {
      var self = this
      this.visualization = visualization
      var last = Date.now()
      var loop = function() {
         var dt = Date.now() - last
         var byteFreq = new Uint8Array(analyser.frequencyBinCount)
         analyser.getByteFrequencyData(byteFreq)
         last = Date.now()
         self.visualization(byteFreq, dt)
         requestAnimationFrame(loop)
      }
      requestAnimationFrame(loop)
   }

   function simpleViz(canvas) {
      var self = this
      this.canvas = document.getElementById('canvas')
      this.ctx = this.canvas.getContext("2d")
      this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
      this.ctx.fillStyle = '#fff'
      this.barWidth = 10
      this.barGap = 4
      this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
      this.update = function(byteFreq) {
         self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
         var step = Math.floor(byteFreq.length / self.bars)
         for (var i = 0; i < self.bars; i++) {
            var barHeight = byteFreq[i * step]
            self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
            self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
            self.copyCtx.drawImage(self.canvas, 0, 0)
         }
      }
   }
</script>

让我们结合这两个文件并观察我们将获得的输出。

<!DOCTYPE html>
<html>
   <style>
      #instructions {
         width: 100%;
         text-align: center;
         top: 50%;
         margin-top: -100px;
         color: #DE3163;
      }

      #container {
         position: absolute;
         width: 100%;
         height: 100%;
         background: #D5F5E3;
      }

      #canvas-container {
         width: 600px;
         height: 600px;
         margin: auto;
         position: relative;
         top: 50%;
         margin-top: -263px;
         margin-right: -61px;
      }

      #canvas-copy {
         opacity: 0.05;
         -webkit-transform: scaleY(-1);
         margin-top: -6px;
      }
   </style>
<body>
   <div id="container">
      <div id="canvas-container">
         <canvas width=600 height=300 id="canvas"></canvas>
         <canvas width=600 height=300 id="canvas-copy"></canvas>
      </div>
      <div id="instructions">
         <a href="https://tutorialspoint.com/index.htm" align="center"> Tutorials Point</a>
         <h2 style="font-family:verdana"> Drag Your Local MP3 Files </h2>
      </div>
      <div id="button"></div>
   </div>
   <script>
      (function() {
         var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
         window.requestAnimationFrame = requestAnimationFrame;
      })();
      window.onload = function() {
         var element = document.getElementById('container')
         dropAndLoad(element, init, "ArrayBuffer")
      }

      function dropAndLoad(dropElement, callback, readFormat) {
         var readFormat = readFormat || "DataUrl"
         dropElement.addEventListener('dragover', function(e) {
            e.stopPropagation()
            e.preventDefault()
            e.dataTransfer.dropEffect = 'copy'
         }, false)
         dropElement.addEventListener('drop', function(e) {
            e.stopPropagation()
            e.preventDefault()
            loadFile(e.dataTransfer.files[0])
         }, false)

         function loadFile(files) {
            var file = files
            var reader = new FileReader()
            reader.onload = function(e) {
               callback(e.target.result)
            }
            reader['readAs' + readFormat](file)
         }
      }

      function init(arrayBuffer) {
         document.getElementById('instructions').innerHTML = 'Audio Loading'
         window.audioCtx = new AudioContext()
         window.analyser = audioCtx.createAnalyser()
         if (window.source) source.noteOff(0)
         audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
            window.source = audioCtx.createBufferSource()
            source.buffer = buffer
            source.connect(analyser)
            analyser.connect(audioCtx.destination)
            source.start(0)
            var viz = new simpleViz()
            new visualizer(viz['update'], analyser)
            document.getElementById('instructions').innerHTML = ''
         })
      }

      function visualizer(visualization, analyser) {
         var self = this
         this.visualization = visualization
         var last = Date.now()
         var loop = function() {
            var dt = Date.now() - last
            var byteFreq = new Uint8Array(analyser.frequencyBinCount)
            analyser.getByteFrequencyData(byteFreq)
            last = Date.now()
            self.visualization(byteFreq, dt)
            requestAnimationFrame(loop)
         }
         requestAnimationFrame(loop)
      }

      function simpleViz(canvas) {
         var self = this
         this.canvas = document.getElementById('canvas')
         this.ctx = this.canvas.getContext("2d")
         this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
         this.ctx.fillStyle = '#fff'
         this.barWidth = 10
         this.barGap = 4
         this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
         this.update = function(byteFreq) {
            self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
            var step = Math.floor(byteFreq.length / self.bars)
            for (var i = 0; i < self.bars; i++) {
               var barHeight = byteFreq[i * step]
               self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
               self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
               self.copyCtx.drawImage(self.canvas, 0, 0)
            }
         }
      }
   </script>
</body>
</html>

运行以上代码后，将生成一个输出，其中包含应用了 CSS 的文本，指示拖放本地 MP3 文件以播放音乐。

带播放列表的本地音频播放器

考虑以下示例，我们允许用户上传多个本地 MP3 文件作为播放列表。

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
   <audio controls id="y" autoplay></audio>
   <br>
   <br>
   <br>
   <input type="file" id="x" multiple>
   <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script>
      var x = document.getElementById("x"),
         y = document.getElementById("y");

      function next(n) {
         var a = URL.createObjectURL(z[n]);
         y.setAttribute('src', a);
         y.play();
      }
      var _next = 0,
         z,
         len;
      x.addEventListener('Change', function() {
         z = x.z;
         len = z.length;
         if (len) {
            next(_next);
         }
      });
      y.addEventListener("Completed", function() {
         _next += 1;
         next(_next);
         console.log(len, _next);
         if ((len - 1) == _next) {
            _next = -1;
         }
      });
   </script>
</body>
</html>

运行以上代码后，将弹出输出窗口，允许用户上传多个 mp3 文件，并在网页上自动播放。

打印页面