Question

我是JQuery的新手，我正在尝试为期末考试创建一个音频播放器。我写了这段代码，但显然我不能创建一个Audio元素。我正在关注网络指南，但我发现了这个问题，因为它还没有完成。确切地说，我需要一个音频播放器，它在顶部显示歌曲的封面图像，在底部显示播放和暂停命令。我该怎么做？提前谢谢。

＆＃13;

/*creating an audio element*/
    $(document).ready(function(){
      var song = new Audio("songs/numb.mp3");
      var play = $("img.play");
      var pause = $("img.pause");
      pause.hide();
      /*set of instruction when the play img is pressed*/
      $(".play").click(function(){ 
        play.hide();
        song.play();
        pause.show();
      });
      /*set of instruction when the pause img is pressed*/
      $(".pause").click(function(){ 
        pause.hide();
        song.pause();
        play.show();
      });
    });

＆＃13;

html,body,div{margin: 0; padding: 0;}
    div.container{
      width: 20%;
      height:200px;
      margin: auto;
      margin-top: 30px;
      background-color: lightgrey;
    }
    /*div that contains the cover image*/
    div.img{
      width: 100%;  
      height: 80%;
    }
    /*cover image*/
    img.songbackground{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    /*div that contains play and pause img*/
    div.commands{
      width: 100%;
      height: 20%;
      background-color: lightgrey;
    }
    /*play img*/
    img.play{
      width: auto;
      height: 100%;
      float: left;
      object-fit: contain;
    }
    /*pause img*/
    img.pause{
      width: auto;
      height: 100%;
      float: left;
      object-fit: contain;
    }

＆＃13;

<html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        </head>
        <body>
            <div class="container">
                <div class="img">
                    <img class="songbackground" src="http://images.wired.it/wp-content/uploads/2016/01/1453282239_gatto-9-600x335.jpg">
                </div>
                <div class="commands">
                    <img class="play" src="http://tympanus.net/PausePlay/images/play.png">
                    <img class="pause" src="http://tympanus.net/PausePlay/images/pause.png">
                </div>
            </div>   
        </body>
    </html>

＆＃13;

Answer 1

可以使用HTML5 Audio API。

请参阅此入门教程：http://www.html5rocks.com/en/tutorials/webaudio/intro/

这是一个出色的图书馆：http://www.createjs.com

和一些例子：http://www.createjs.com/#!/SoundJS/demos

以及官方规范：https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

PS：我从Is it possible to create javascript audio player with multiple tracks playing in same time?

那里得到了这个答案

Answer 2

您的代码应该可以正常工作，只需为音频文件指定正确的uri即可。这里是没有jQuery的代码，只是为了好玩（示例音频来自Una Kravets＆＃39;博客）：

＆＃13;

function ready(){
  var song = new Audio("http://una.im/audio/counter-increment.mp3");
  var play = document.querySelector("img.play");
  var pause = document.querySelector("img.pause");
  pause.classList.add('hide');
  play.addEventListener('click', function(){ 
    play.classList.add('hide');
    song.play();
    pause.classList.remove('hide');
  });
  pause.addEventListener('click', function(){ 
    pause.classList.add('hide');
    song.pause();
    play.classList.remove('hide');
  });
}

window.addEventListener('load', ready);

＆＃13;

.hide {
  display: none;
}

＆＃13;

<div class="container">
            <div class="img">
                <img class="background" src="http://orig01.deviantart.net/609d/f/2015/279/a/8/va_various_artists_universal_album_cover_by_liberssky-d9c4gfd.jpg" width="200">
            </div>
            <div class="comandi">
                <img class="play" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Play_font_awesome.svg/2000px-Play_font_awesome.svg.png" alt="play" width="50">
                <img class="pause" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Pause_font_awesome.svg/2000px-Pause_font_awesome.svg.png" alt="pause" width="50">
            </div>

＆＃13;

使用jquery的音频播放器

2 个答案: