javascript - 如何删除音频类并来回切换?
问题描述
我正在尝试创建一个按钮,用户可以将歌曲添加到播放列表。到目前为止我有这个
$(document).ready(function(){
$(".toggle_container").hide();
$("button.reveal").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
if ($.trim($(this).text()) === 'Add to Playlist') {
$(this).text('Remove from playlist');
} else {
$(this).text('Add to Playlist');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});
作为我的 java 脚本代码,它运行良好,尽管它所做的只是添加 div 或删除 div。当您单击 div 时,它会播放歌曲。问题是歌曲在 div 显示与否的任何情况下播放。我只希望在显示 div 时播放歌曲。我尝试将音频链接放在 div 中,但它不起作用。我正在考虑添加一些这样的代码
$('source#song1' + this.id).parent().remove();
但我真的不确定。这是完整的小提琴。
编辑
我的代码工作正常,虽然我只希望在单击添加到播放列表按钮时播放音频。我得到的答案是在单击删除音频时删除音频,尽管这只是我想要的。如果你转到这个小提琴并转到第一首歌曲的结尾,你会注意到第二首歌曲会自动播放。如果单击添加到播放列表按钮,我只希望第二首歌曲自动播放。
解决方案
问题在于开头的以下内容audioPlayer()
:
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#audioPlayer")[0].play();
您在任何事情发生之前启动播放器。
您的audioPlayer()
方法应如下所示:
function audioPlayer() {
var currentSong = 0;
$("#playlist li a").click(function(e) {
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function() {
currentSong++;
if (currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq(" + currentSong + ")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
这将解决您在开始播放歌曲的问题。接下来,要在隐藏 div 时停止歌曲,可以在按钮单击事件处理程序中添加以下内容:
if ($.trim($(this).text()) === 'Add to Playlist') {
$(this).text('Remove from playlist');
} else {
$("#audioPlayer")[0].pause();
$("#audioPlayer")[0].currentTime = 0;
$(this).text('Add to Playlist');
}
最终结果应该是:
$(document).ready(function() {
$(".toggle_container").hide();
$("button.reveal").click(function() {
$(this).toggleClass("active").next().slideToggle("fast");
if ($.trim($(this).text()) === 'Add to Playlist') {
$(this).text('Remove from playlist');
} else {
$("#audioPlayer")[0].pause();
$("#audioPlayer")[0].currentTime = 0;
$(this).text('Add to Playlist');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});
#searchbar {
padding: 15px;
border-radius: 10px;
width: 80%
}
#playlist .current-song a {
color: #7777FE;
border-color: #008ae6;
}
#playlist {
list-style: none;
}
#playlist li a {
text-decoration: none;
color: #ca0ce0;
}
#playlist {
font-size: 14.5px;
list-style: none;
margin-left: 40px;
color: blue;
}
.animals {
display: list-item;
margin-bottom: 5px;
}
#background {
border: solid;
width: 100%;
height: 75px;
margin-top: 5px;
margin-left: 5px;
}
#background2 {
border: solid;
width: 98%;
height: 75px;
margin-top: 5px;
margin-left: 5px;
}
#background3 {
border: solid;
width: 100%;
height: 75px;
margin-top: 5px;
margin-left: 0px;
}
#playlist.current-song {
border-color: #008ae6;
}
.image {
width: 100px;
float: left
}
#song {
margin-left: 13px;
margin-top: 9px;
float: left;
}
.artist {
text-align: center;
margin-right: 20px;
font-size: 12px;
margin-top: 14px;
}
.image3 {
width: 100px;
float: left;
height: 75px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audioPlayer" preload="true">
</audio>
<ul id="playlist">
<button class="reveal">Add to Playlist </button>
<div class="toggle_container">
<div class="block">
<li class="current-song"><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3">
<div id="background2"><img src="https://images.unsplash.com/photo-1577044685231-70e99274404c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80Cat" class="image" />
<h4 id="song">Tummy Why</h4>
<h5 class="artist">Revy Conover</h5>
</div>
</a></li>
</div>
</div>
</ul>
<script>
audioPlayer();
function audioPlayer() {
var currentSong = 0;
$("#playlist li a").click(function(e) {
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function() {
currentSong++;
if (currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq(" + currentSong + ")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
</script>
注意:我已经删除了ontimeupdate
音频上的事件,因为您没有提供它的代码,所以它会引发错误。
推荐阅读
- java - 从数据库中过滤 ArrayList
- android - 使用 360 度图像作为背景拍照
- javascript - 多步 Javascript 计时算法
- tibco - 在模块描述符中归档的组件中显示过程的问题
- java - 为什么我的打印三角数代码不起作用?
- 3d - 框架中基于三角形的地形上的纹理坐标问题
- c# - 如何在 ASP.NET MVC 5 中使用 NAudio/SoundTouch 流式传输 MP3?
- visual-studio-2015 - 64 位 windows 10 pro visual studio 和 oracle 64 位 - oracle 不是 64 位的错误
- c - 在 C 中初始化 const 变量
- swift - 如何在完成处理程序中使用返回值?