JavaScript 音频插件和图表插件

最新推荐文章于 2024-08-20 10:00:12 发布

苦涩2020

最新推荐文章于 2024-08-20 10:00:12 发布

阅读量680

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/107152540

版权

本文介绍了如何使用JavaScript的howler音频插件进行播放、暂停、停止、设置音量等操作，并详细讲解了ECharts图表库的配置，包括图表标题、图例、坐标轴样式等，帮助开发者实现音频控制与图表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

howler音频插件

配置项及事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <script>
        //实例化音频
        var sound = new Howl({
    
            // 初始化配置
            // 资源路径，及多媒介资源
            src:"./qb.mp3",
            // src : ["./qb.mp3", "./qb.wav", "./qb.ogg"],//让浏览自动识别可以播放的音频文件
            
            // 自动播放: true表示自动播放，false表示不自动播放
            autoplay:true,

            // 循环播放: true表示循环，false表示不循环
            loop:false,

            // 音量，在0-1之间，默认为1
            volume:1,

            // 事件
            onload:function(){
    
                console.log("音频就绪");
            },

            onplay:function(){
    
                console.log("开始播放");
            },

            onend:function(){
    
                console.log("结束播放");
            },

            onpause:function(){
    
                console.log("暂停播放");
            },

            onstop:function(){
    
                console.log("停止播放");
            }
        }); 
    </script>
</body>
</html>

播放、暂停、停止、状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暂停</button>
    <button id="btn3">停止</button>
    <button id="btn4">播放状态</button>
    <script>
        //实例化音频
        var sound = new Howl({
    
            // 资源路径
            src:"./qb.mp3",

            // 事件
            onload:function(){
    
                console.log("音频就绪");
            },

            onplay:function(){
    
                console.log("开始播放");
            },

            onend:function(){
    
                console.log("结束播放");
            },

            onpause:function(){
    
                console.log("暂停播放");
            },

            onstop:function(){
    
                console.log("停止播放");
            }
        }); 

        // 播放音乐
        document.getElementById("btn1").onclick = function(){
    
            sound.play();
        };

        // 暂停音乐
        document.getElementById("btn2").onclick = function(){
    
            sound.pause();
        };

        // 停止音乐
        document.getElementById("btn3").onclick = function(){
    
            sound.stop();
        };

        // 获取播放状态
        document.getElementById("btn4").onclick = function(){
    
            var playing = sound.playing();
            // false:停止或暂停、true：播放
            console.log(playing);
        };
    </script>
</body>
</html>

获取和设置静音及音量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/howler.min.js"></script>
</head>
<body>
    <button id="btn1">播放</button>
    <button id="btn2">暂停</button>
    <button id="btn3">静音</button>
    <button id="btn4">音量</button>

    <script>
        //实例化音频
        var sound = new Howl({
    
            // 资源路径
            src:"./qb.mp3",
        }); 

        // 播放音乐
        document.getElementById("btn1").onclick = function(){
    
            sound.play();
        };
        // 暂停音乐
        document.getElementById("btn2").onclick = function(){
    
            sound.pause();
        };

        // 获取和设置音频静音
        document.getElementById("btn3").onclick = function(){
    
            // 获取是否静音
            var mute = sound.mute();
            // false:音量正常、true：静音
            console.log(mute);

            // 设置静音
            if(mute == false){
    
                sound.mute(true);
            }else{
    
                sound.mute(false);
            }
        };
        
        // 获取和设置音频音量
        document.getElementById("btn4").onclick = function(){
    
            // 获取音量
            var vol = sound.volume();
            //音量介于0至1之间
            console.log(vol);

            // 设置音量
            sound.volume(0.2);
        };
    </script>
</body>
</html>

获取和设置循环播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

最低0.47元/天解锁文章