开发者社区> 问答> 正文

上传到VOD-视频点播的音频,在html中用audio播放器,无法设置起播时长怎么解决呢?

上传到VOD-视频点播的音频,在html中用audio播放器,无法设置起播时长怎么解决呢?每次拖放到任意进度,点击播放都会重新开始播放。

展开
收起
三分钟热度的鱼 2023-06-12 20:29:51 147 0
1 条回答
写回答
取消 提交回答
  • 该问题的根本原因是HTML5的Audio标签无法设置音频起播的时间,因此每次播放都会从音频的起始位置开始播放。不过,我们可以通过JavaScript代码来实现这一功能。

    具体实现方式如下:

    1、在HTML文件中添加audio标签,并为其设置id和src属性,如下所示:

    <audio id="myAudio" src="http://example.com/myaudio.mp3"></audio>
    

    2、在JavaScript代码中获取audio元素,并为其添加canplay事件监听器,如下所示:

    var audio = document.getElementById("myAudio");
    audio.addEventListener("canplay", function() {
        audio.currentTime = 10; // 设置音频起播时间为10秒
    });
    

    在canplay事件被触发时,将音频的起播时间设置为10秒,即可实现音频在指定时间点开始播放的效果。

    另外,如果希望在音频被拖动时不会重新开始播放,可以在JavaScript代码中为audio元素添加timeupdate事件监听器,并记录当前播放时间,如下所示:

    var audio = document.getElementById("myAudio");
    var startTime = 10; // 设置音频起播时间为10秒
    var currTime = startTime; // 记录当前播放时间
    
    audio.addEventListener("canplay", function() {
        audio.currentTime = startTime;
    });
    
    audio.addEventListener("timeupdate", function() {
        if (audio.currentTime < startTime) {
            audio.currentTime = currTime;
        } else {
            currTime = audio.currentTime;
        }
    });
    

    在timeupdate事件被触发时,如果当前播放时间小于起播时间,则将播放时间设置为之前记录的当前播放时间,否则更新当前播放时间。这样,即使用户拖动了音频的播放进度条,音频也会从指定时间点开始播放,而不会重新开始播放。

    2023-06-13 08:15:50
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
天猫HTML5互动技术实践 立即下载
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载