Question

我已经使用javascript创建了音频播放器，

使用以下Javascript，html，css，当我在html中添加另一个音频文件时，我在HTML中获得一个音频文件的预期结果。

您能建议任何人建议如何处理HTML中的多个音频文件吗？

JavaScript

        function calculateTotalValue(length) {
          var minutes = Math.floor(length / 60),
            seconds_int = length - minutes * 60,
            seconds_str = seconds_int.toString(),
            seconds = seconds_str.substr(0, 2),
            time = minutes + ':' + seconds
          return time;
        }

        function calculateCurrentValue(currentTime) {
          var current_hour = parseInt(currentTime / 3600) % 24,
            current_minute = parseInt(currentTime / 60) % 60,
            current_seconds_long = currentTime % 60,
            current_seconds = current_seconds_long.toFixed(),
            current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);

          return current_time;
        }

        function initProgressBar() {
          var player = document.getElementById('player');
          var length = player.duration
          var current_time = player.currentTime;

          // calculate total length of value
          var totalLength = calculateTotalValue(length)
          jQuery(".end-time").html(totalLength);

          // calculate current value time
          var currentTime = calculateCurrentValue(current_time);
          jQuery(".start-time").html(currentTime);

          var progressbar = document.getElementById('seekObj');
          progressbar.value = (player.currentTime / player.duration);
          progressbar.addEventListener("click", seek);

          if (player.currentTime == player.duration) {
            $('#play-btn').removeClass('pause');
          }

          function seek(evt) {
            var percent = evt.offsetX / this.offsetWidth;
            player.currentTime = percent * player.duration;
            progressbar.value = percent / 100;
          }
        };

        function initPlayers(num) {
          for (var i = 0; i < num; i++) {
            (function() {

              var playerContainer = document.getElementById('player-container'),
                player = document.getElementById('player'),
                isPlaying = false,
                playBtn = document.getElementById('play-btn');

              if (playBtn != null) {
                playBtn.addEventListener('click', function() {
                  togglePlay()
                });
              }

              // Controls & Sounds Methods
              // ----------------------------------------------------------
              function togglePlay() {
                if (player.paused === false) {
                  player.pause();
                  isPlaying = false;
                  $('#play-btn').removeClass('pause');

                } else {
                  player.play();
                  $('#play-btn').addClass('pause');
                  isPlaying = true;
                }
              }
            }());
          }
        }

        function muteAud(){

        if (player.muted === false) {    
              player.muted = true;
              $('#btn_muteUnmute').addClass('mute');

        }
        else
        {
        player.muted = false;
        $('#btn_muteUnmute').removeClass('mute');
        }
        }

        initPlayers(jQuery('#player-container').length);

这是HTML：

    <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
        <head>
        <meta  charset="utf-8"/>
        <link rel="stylesheet" href="css/style.css"/>
        </head>
        <body>
           <div class="audio-player">
           <div id="play-btn"></div>
             <div class="audio-wrapper" id="player-container">
            <audio id="player" ontimeupdate="initProgressBar()">
            <source
            src="mmc03-01-9780128023198.mp3" type="audio/mp3"/></audio>
              </div>
                <div class="player-controls scrubber">
              <div id="seekObjContainer">
                      <progress id="seekObj" value="0" max="1"></progress>
              </div>
              <small style="float: left; position: relative; left: 15px;" class="start-time"></small>
              <small style="float: right; position: relative; right: 20px;" class="end-time"></small>
              <div id="btn_muteUnmute"></div>
             </div>
            </div>
            <script src="js/jquery.min.js"></script>
              <script  src="js/index.js"></script>
        </body>
        </html>

CSS：

        html {
          height: 100%;
          display: table;
          margin: auto;
        }

        body {
          height: 100%;
          display: table-cell;
          vertical-align: middle;
        }

        .start-time
        {
            margin: 0rem 0rem 0 0rem;
        }

        .end-time
        {
            margin: 0rem 15rem 0 0rem;
        }



        .audio-player {
          background: white;
          width: 50vw;
          text-align: center;
          display: flex;
          flex-flow: row;
          margin: 4rem 0 4rem 0;
        }

        .audio-player .player-controls {
          align-items: center;
          justify-content: center;
          margin-top: 2.5rem;
          flex: 3;
        }
        .audio-player .player-controls progress {
          width: 70%;
          margin-left: -15.5rem;
        }
        .audio-player .player-controls progress[value] {
          -webkit-appearance: none;
          appearance: none;
          background-color: white;
          color: grey;
          height: 6px;
        }
        .audio-player .player-controls progress[value]::-webkit-progress-bar {
          background-color: #d3d3d3;
          border-radius: 2px;
          border: 1px solid #dfdfdf;
          color: grey;
        }
        .audio-player .player-controls progress::-webkit-progress-value {
          background-color: grey;
        }

        .audio-player .player-controls p {
          font-size: 1.6rem;
        }
        .audio-player #play-btn {
          background-image: url("../img/play.png");
          background-size: cover;
          width: 25px;
          height: 25px;
          margin: 2.7rem 0 2rem 2rem;
        }
        .audio-player #play-btn.pause {
          background-image: url("../img/pause.png");
        }

        .audio-player #btn_muteUnmute {
          background-image: url("../img/unmute.png");
          background-size: cover;
          width: 25px;
          height: 25px;
          margin: -1.9rem 0 2rem 48rem;
        }
        .audio-player #btn_muteUnmute.mute {
          background-image: url("../img/mute.png");
        }
        html{font-size:10px;)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}

Answer 1

您是'My-Name':，而不是id：像这样更改一些代码：

class

注意：您应该遍历元素var playerContainer = document.querySelectorAll('.player-container'), player = document.querySelectorAll('.player'), isPlaying = false, playBtn = document.querySelectorAll('.play-btn');，playerContainer和player变量，因为playBtn返回Node的列表。

建议：如果您使用jQuery，则将其用作选择器。

音频播放器不适用于多个音频

1 个答案: