Javascript HTML/JS音频播放列表页面退出时暂停/恢复_Javascript_Html

Javascript HTML/JS音频播放列表页面退出时暂停/恢复

javascript html

Javascript HTML/JS音频播放列表页面退出时暂停/恢复,javascript,html,Javascript,Html,我不确定我被要求做的事情是否可行，我在JS方面还没有太多的专业知识，所以我一直在谷歌上搜索，到目前为止还没有找到答案我们正在使用一个名为RiseVision的程序来运行一个演示文稿，它基本上是自动化的，并且增强了Powerpoint。我们有一个幻灯片，我设法让音乐在播放列表的背景中运行，然而，有时我们会将这些演示设置为退出，然后切换到youtube视频，然后重新开始演示。我被要求做的是让音乐从它所在的位置恢复，或者至少跳到下一首歌，一旦幻灯片在视频后再次启动由于RiseVision计划的性质

我不确定我被要求做的事情是否可行，我在JS方面还没有太多的专业知识，所以我一直在谷歌上搜索，到目前为止还没有找到答案

我们正在使用一个名为RiseVision的程序来运行一个演示文稿，它基本上是自动化的，并且增强了Powerpoint。我们有一个幻灯片，我设法让音乐在播放列表的背景中运行，然而，有时我们会将这些演示设置为退出，然后切换到youtube视频，然后重新开始演示。我被要求做的是让音乐从它所在的位置恢复，或者至少跳到下一首歌，一旦幻灯片在视频后再次启动

由于RiseVision计划的性质，我的操作能力有限：

音乐在隐藏在幻灯片后面的HTML小部件上运行，视频播放时小部件将关闭，然后在播放后再次打开

因为它只是一个小部件，我没有能力操纵文件结构，所以我只是将JS粘贴在一个标记中

这些显示器上没有用户输入，所以一切都自动运行，我们可以远程更新演示文稿

任何想法都会非常感激，我在想也许我可以使用eventlistener停止并以某种方式保存索引

下面是我使用的代码，基本上取自：


HTML5音频播放器
#播放列表{
列表样式：无；
}
#播放列表李a{
颜色：黑色；
文字装饰：无；
}
#播放列表。当前歌曲a{
颜色：蓝色；
}




函数audioPlayer（）{
var-currentSong=0；
$（“#audioPlayer”）[0].src=$（“#播放列表LIA”）[0]；
$（“#audioPlayer”）[0]。播放（）；
$（“#播放列表LIA”）。单击（功能（e）{
e、 预防默认值（）；
$（“#audioPlayer”）[0].src=this；
$（“#audioPlayer”）[0]。播放（）；
$（“#playlist li”）.removeClass（“当前歌曲”）；
currentSong=$（this.parent（）.index（）；
$（this.parent（）.addClass（“当前歌曲”）；
});
$（“#audioPlayer”）[0]。addEventListener（“结束”，函数（）{
当前歌曲++；
如果（currentSong==$（“#播放列表a”）.length）
currentSong=0；
$（“#playlist li”）.removeClass（“当前歌曲”）；
$（“#播放列表li:eq（“+currentSong+”）.addClass（“当前歌曲”）；
$（“#audioPlayer”）[0]。src=$（“#播放列表LIA”）[currentSong]。href；
$（“#audioPlayer”）[0]。播放（）；
});
}
//加载音频播放器
音频播放器（）；

这个问题终于解决了，答案其实比我想的要简单得多。我能够使用localStorage保存当前歌曲的索引，并在软件恢复时加载列表中的下一首歌曲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Audio Player</title>
    <style>
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color:black;
            text-decoration: none;
        }
        #playlist .current-song a{
            color:blue;
        }
    </style>
</head>
<body>
    <!--Audio Player--> 
    <audio src="" controls id="audioPlayer">
        Sorry, your browser doesn't support html5!
    </audio>
    <!-- List of songs -->
    <ul id="playlist">
        <li class="current-song">
        <a href="[Link to Song Here]">[Name of Song Here]</a></li>
        <li><a href="[Link to Song Here]">[Name of Song Here]</a></li>
        <li><a href="[Link to Song Here]">[Name of Song Here]</a></li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script language="javascript">

        function audioPlayer(){
            var currentSong = 0;
        //If the locally stored position doesn't exist yet, set it to currentSong, otherwise increment it by one
        if (localStorage.songPosition === "NaN"){
            localStorage.songPosition = currentSong
        }
        else{
            localStorage.songPosition++
        }
        //If the stored song position is greater than the length of the song index, reset it.
        if(localStorage.songPosition > $("#playlist li a").length-1)
                localStorage.songPosition = 0;
        //Play the song at the locally stored position
        $("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
        $("#audioPlayer")[0].play();
        //Allows you to click titles to change songs, this is mostly for an actual web page and not necessary for an automatic system.
        $("#playlist li a").click(function(e){
           e.preventDefault(); 
           $("#audioPlayer")[0].src = this;
           $("#audioPlayer")[0].play();
           $("#playlist li").removeClass("current-song");
            currentSong = $(localStorage.songPosition).parent().index();
            $(this).parent().addClass("current-song");
        });
        //Check for the end of the current song, increment the current song counter and play the next one.
        $("#audioPlayer")[0].addEventListener("ended", function(){
           currentSong++;
           localStorage.songPosition = 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>
<script>
    // loads the audio player
    audioPlayer();
</script>


HTML5音频播放器
#播放列表{
列表样式：无；
}
#播放列表李a{
颜色：黑色；
文字装饰：无；
}
#播放列表。当前歌曲a{
颜色：蓝色；
}




函数audioPlayer（）{
var-currentSong=0；
//如果本地存储的位置尚不存在，请将其设置为currentSong，否则将其递增1
if（localStorage.songPosition==“NaN”）{
localStorage.songPosition=currentSong
}
否则{
localStorage.songPosition++
}
//如果存储的歌曲位置大于歌曲索引的长度，请将其重置。
if（localStorage.songPosition>$（“#播放列表li a”）.length-1）
localStorage.songPosition=0；
//在本地存储的位置播放歌曲
$（“#audioPlayer”）[0].src=$（“#playlist li a”）[localStorage.songPosition]；
$（“#audioPlayer”）[0]。播放（）；
//允许您单击标题以更改歌曲，这主要用于实际网页，而不是自动系统所必需的。
$（“#播放列表LIA”）。单击（功能（e）{
e、 预防默认值（）；
$（“#audioPlayer”）[0].src=this；
$（“#audioPlayer”）[0]。播放（）；
$（“#playlist li”）.removeClass（“当前歌曲”）；
currentSong=$（localStorage.songPosition）.parent（）.index（）；
$（this.parent（）.addClass（“当前歌曲”）；
});
//检查当前歌曲的结尾，增加当前歌曲计数器并播放下一首歌曲。
$（“#audioPlayer”）[0]。addEventListener（“结束”，函数（）{
当前歌曲++；
localStorage.songPosition=currentSong；
如果（currentSong==$（“#播放列表a”）.length）
currentSong=0；
$（“#playlist li”）.removeClass（“当前歌曲”）；
$（“#播放列表li:eq（“+currentSong+”）.addClass（“当前歌曲”）；
$（“#audioPlayer”）[0]。src=$（“#播放列表LIA”）[currentSong]。href；
$（“#audioPlayer”）[0]。播放（）；
});
}
//加载音频播放器
音频播放器（）；

关闭小部件是否会导致HTML刷新/重置？如果是这样，您需要一种方法将音频位置保存在小部件之外。您可以在小部件和幻灯片之间进行通信吗？您提到了eventListener-您是否认为它也可能在小部件中？据我所知，幻灯片和HTML小部件之间没有通信，关闭小部件会将其完全刷新，因此播放列表从顶部重新开始如何在幻灯片中嵌入/引用/触发？您可以包括它的外观或RiseVision文档的链接吗？提供的代码看起来您必须手动单击链接并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Audio Player</title>
    <style>
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color:black;
            text-decoration: none;
        }
        #playlist .current-song a{
            color:blue;
        }
    </style>
</head>
<body>
    <!--Audio Player--> 
    <audio src="" controls id="audioPlayer">
        Sorry, your browser doesn't support html5!
    </audio>
    <!-- List of songs -->
    <ul id="playlist">
        <li class="current-song">
        <a href="[Link to Song Here]">[Name of Song Here]</a></li>
        <li><a href="[Link to Song Here]">[Name of Song Here]</a></li>
        <li><a href="[Link to Song Here]">[Name of Song Here]</a></li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script language="javascript">

        function audioPlayer(){
            var currentSong = 0;
        //If the locally stored position doesn't exist yet, set it to currentSong, otherwise increment it by one
        if (localStorage.songPosition === "NaN"){
            localStorage.songPosition = currentSong
        }
        else{
            localStorage.songPosition++
        }
        //If the stored song position is greater than the length of the song index, reset it.
        if(localStorage.songPosition > $("#playlist li a").length-1)
                localStorage.songPosition = 0;
        //Play the song at the locally stored position
        $("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
        $("#audioPlayer")[0].play();
        //Allows you to click titles to change songs, this is mostly for an actual web page and not necessary for an automatic system.
        $("#playlist li a").click(function(e){
           e.preventDefault(); 
           $("#audioPlayer")[0].src = this;
           $("#audioPlayer")[0].play();
           $("#playlist li").removeClass("current-song");
            currentSong = $(localStorage.songPosition).parent().index();
            $(this).parent().addClass("current-song");
        });
        //Check for the end of the current song, increment the current song counter and play the next one.
        $("#audioPlayer")[0].addEventListener("ended", function(){
           currentSong++;
           localStorage.songPosition = 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>
<script>
    // loads the audio player
    audioPlayer();
</script>