var tracklist = [{
src: 'https://primi.gg/assets/audio/gucci.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
{
src: 'https://primi.gg/assets/audio/anarchyacres.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
{
src: 'https://primi.gg/assets/audio/sempiternal.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
{
src: 'https://primi.gg/assets/audio/wither.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
{
src: 'https://primi.gg/assets/audio/enemy.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
{
src: 'https://primi.gg/assets/audio/antisocial.mp3',
cover: 'https://i.imgur.com/Vayupax.jpg'
},
];
var player = false;
var track = 1;
var lastTrack = -1;
var play = function() {
if (lastTrack != track) {
player.src = tracklist[track - 1].src;
}
lastTrack = track;
if (player.paused) {
player.play();
}
};
$(document).ready(function() {
player = document.createElement('audio');
$('a.player-control').click(function(event) {
event.preventDefault();
});
$('#play').click(function() {
play();
});
$('#pause').click(function() {
if (!player.paused) {
player.pause();
}
});
$('#next').click(function() {
track++;
if (track > tracklist.length) {
track = 1;
}
play();
});
$('#prev').click(function() {
track--;
if (track < 1) {
track = tracklist.length;
}
play();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="prev" class="player-control">prev</a>
<a href="#" id="play" class="player-control">play</a>
<a href="#" id="pause" class="player-control">pause</a>
<a href="#" id="next" class="player-control">forward</a>
我基本上是在尝试使用 css 和 html 制作自定义音频控件,但将所有内容都放在适当的位置它不起作用。我认为它与代码的特定部分有关“href='#'...我对编码完全陌生,所以任何帮助和指示都会很好!这是完整的代码,提前谢谢你!
最佳答案
您的 javascript 代码保存为 .css
文件,您需要将其另存为 .js
并使用 <script></script>
将其导入到您的 html 中标签。您还需要使用 jquery 库。将其放在脚本之前的头部部分,例如
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https:/yourscript.js"></script>
祝你好运
关于javascript - href '#' ?尝试制作音频控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52466501/