zoukankan      html  css  js  c++  java
  • 原生js控制audio标签播放、暂停、重新加载

    audio不仅是一个标签,也是window下的一个对象,作为对象,具有一些对象属性和对象方法:

      对象属性:

        currentTime:获取当前播放时间

        duration:获取歌曲的总时间

        pause:是否暂停,返回布尔值

      对象方法:

        play():播放

        pause():暂停

        load():重新加载

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>audio播放暂停重新播放</title>
    </head>
    <body>
        <audio
            src="https://ip-h5-nf01-sycdn.kuwo.cn/08fc62da0d838431d2c6135ddd66c5ae/5e1bdce5/resource/n2/97/38/2347707388.mp3"
            controls preload id="music1">
        </audio>
        <button id="bf" onclick="bf();">播放</button>
        <button onclick="rbf();">重新播放</button>
        <script>
            function rbf() {
                var audio = document.getElementById('music1');
                var bf=document.getElementById("bf");
                audio.currentTime = 0;
                audio.play();
                bf.innerText="暂停";
            }
    
            function bf() {
                var audio = document.getElementById('music1');
                var bf=document.getElementById("bf");
                if (audio !== null) {
                    if (audio.paused) {
                        audio.play(); //audio.play();// 这个就是播放  
                        bf.innerText="暂停";
                    } else {
                        audio.pause(); // 这个就是暂停
                        bf.innerText="播放";
                    }
                }
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    从零开始学CSS-overflow
    vue 高度自适应的问题处理
    子div在父div里居中
    IEC104协议规约解析
    Arduino编译总结
    通过golang小案例,了解golang程序常见机制
    用go实现常见的数据结构
    常见面试题整理,金三银四全靠它了
    golang知识总结
    .NET Core 基于 Grafana Loki 日志初体验
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12186595.html
Copyright © 2011-2022 走看看