使用 jquery 的音频播放器
Posted
技术标签:
【中文标题】使用 jquery 的音频播放器【英文标题】：audio player using jquery 【发布时间】：2016-04-13 16:52:31 【问题描述】：我是 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,divmargin: 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>【问题讨论】：
你的 sn-p 似乎没有做任何事情。 抱歉，请立即尝试 【参考方案1】：HTML5 音频 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?得到这个答案
【讨论】：
这个答案并不是非常有用，因为它只是一系列链接。如果这些链接上的信息发生变化或网站关闭怎么办？如果不是完全无用的话，您的回答对于未来的用户来说将是部分无用的。不要只是说 HTML5 的音频 API 可以，实际上提供一个示例来说明它是如何实现的。 对不起老板，下次我不会让你失望的。说真的，我知道，但我没有足够的这些愚蠢点来评论帖子。如果可以的话，我会这样做的。【参考方案2】：您的代码应该可以工作，只需为音频文件指定一个正确的 uri。这是您没有 jQuery 的代码，只是为了好玩（示例音频来自 Una Kravets 的博客）：
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);.hide
display: none;
<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" >
</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" >
<img class="pause" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Pause_font_awesome.svg/2000px-Pause_font_awesome.svg.png" >
</div>【讨论】：
以上是关于使用 jquery 的音频播放器的主要内容，如果未能解决你的问题，请参考以下文章