个人中心
gpt4 book ai didi

javascript - 使用 jquery 的音频播放器

转载 作者：行者123 更新时间：2023-11-27 23:05:46 24 4
gpt4 key购买 nike

我是 JQuery 新手，我正在尝试为期末考试创建一个音频播放器。我编写了这段代码，但显然以这种方式我无法创建音频元素。我按照网上的指南发现了这个问题，因为它不完整。确切地说，我需要一个音频播放器，它在顶部显示歌曲的封面图像，在底部显示带有播放和暂停命令的栏。我该怎么做？提前致谢。

/*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();
      });
    });
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;
    }
<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>

最佳答案

关于javascript - 使用 jquery 的音频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36604848/

24 4 0
文章推荐： javascript - 根据用户输入的过滤标记 leaflet.js
文章推荐： c++ - 公开定义对象，但在构造函数中创建它
文章推荐： c++ - (clang/llvm-mc/lld) Hello World (x86-64 windows & linux)
文章推荐： javascript - Gulp Concat + Browserync 重启
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com