JavaScript 音频插件和图表插件
2024-06-01 11:01:37
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之间，默认为1volume: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><script src="./js/howler.min.js"></script>
</head>
<body><button id="btn1">播放</button><button id="btn2">暂停</button><button id="btn3">循环</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 loop = sound.loop();// false:不循环、true：循坏console.log(loop);// 设置循环if(loop == false){sound.loop(true);this.innerText = "不循环";}else{sound.loop(false);this.innerText = "循环";}};</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 dur = sound.duration();console.log(dur);};// 获取和设置音频当前播放时间，单位：秒document.getElementById("btn4").onclick = function(){var seek = sound.seek();console.log(seek);// 设置当前播放时间sound.seek(10);console.log(seek);};</script>
</body>
</html>
ECharts图表插件
配置项手册
ECharts教程
图表配置项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售数据"},// 定义x轴xAxis:{// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"]},// 定义y轴yAxis:{},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'line',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
图表标题配置项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售数据", //主标题文字left:10, //标题位置top:5,link:"https://blog.csdn.net/UserPython", //标题跳转地址target:"self", //打开方式textStyle:{ //主标题样式color:"#ff0000",fontSize:20,},subtext:"汽车销售", //副标题// 副标题一样可以像主标题设计样式，需要在属性前加上sub区分subtextStyle:{ //副标题样式color:"#0000ff",fontSize:14,}},// 定义x轴xAxis:{// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},// 定义y轴yAxis:{},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'line',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
图例配置项及调色盘
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售数据", //主标题文字},// 定义x轴xAxis:{// 定义x轴名称name:"日期",// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},// 定义y轴yAxis:{// 定义y轴名称name:"单位: 辆",},//显示图例说明，把图表数据对应的name值显示出来legend:{right:20, //位置设置top:10,textStyle:{ //设置文本样式color:"#0000ff",fontSize:14,},},// 定义图例颜色，调色盘列表color:"#00ff00",//color:["#00ff00", "#ff0000", "#0000ff"],// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'bar',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
坐标轴样式设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售数据", //主标题文字},// 定义x轴xAxis:{// 定义x轴名称name:"日期",// 定义坐标轴名称样式nameTextStyle:{color:"#ff9900",fontSize:20,},// 坐标轴线的样式axisLine:{lineStyle:{color:"#0000ff",width:10,},},// 在x轴上与图表数据对应的名称// data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],// 坐标轴数据名称逐个设置样式data:[{value:'周一',textStyle:{color:"#000000",fontSize:20}},{value:'周二',textStyle:{color:"#ff0000",fontSize:14}},{value:'周三',textStyle:{color:"#00ff00",fontSize:19}},]},// 定义y轴yAxis:{// 定义y轴名称name:"单位: 辆",},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'bar',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
图表标线设置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售数据", //主标题文字},// 定义x轴xAxis:{// 定义x轴名称name:"日期",// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},// 定义y轴yAxis:{// 定义y轴名称name:"单位: 辆",},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'bar',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],// 图表标线markLine:{// min:最小值、max:最大值、average:平均值、median:中位数data:[{type:"average", name:"平均数"}],lineStyle:{color:"#00ff00",width:5}}}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
折线图和柱状图切换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">.abc{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;position: relative;}#box{width: 600px; height: 500px;}.bt{width: 150px; height: 30px; line-height: 30px;position: absolute; top: 10px; right: 10px;}</style>
</head>
<body><div class="abc"><!-- 给图表准备一个容器 --><div id="box"></div><div class="bt"><button id="line">折线图</button><button id="bar">柱状图</button></div></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"七月第一周汽车销售", //主标题文字},// 定义x轴xAxis:{// 定义x轴名称name:"日期",// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},// 定义y轴yAxis:{// 定义y轴名称name:"单位: 辆",},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"汽车销量",//定义图表类型; bar：柱状图、line: 折线图type:'bar',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],}]};// 把配置项和数据显示出来myChart.setOption(option);// 切换到柱状图document.getElementById("bar").onclick = function(){option.series[0].type = "bar";myChart.setOption(option);};// 切换到折线图document.getElementById("line").onclick = function(){option.series[0].type = "line";myChart.setOption(option);};</script>
</body>
</html>
多套数据设置方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"苦涩汽车销售", //主标题文字},// 定义x轴xAxis:{// 定义x轴名称name:"日期",// 在x轴上与图表数据对应的名称data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},// 定义y轴yAxis:{// 定义y轴名称name:"单位: 辆",},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 调色盘列表color:["#ff0000", "#00ff00", "#0000ff"],// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"宝X",//定义图表类型; bar：柱状图、line: 折线图type:'bar',// 图表数据data:[10, 15, 12, 14, 18, 20, 25],},{name:"奔X",type:'bar',data:[8, 12, 17, 14, 13, 23, 21],},{name:"奥X",type:'line',data:[13, 16, 12, 13, 25, 29, 15],}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
饼状图配置方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"汽车销量", //主标题文字},//显示图例说明，把图表数据对应的name值显示出来legend:{top:20},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 系列列表，通过type决定图表类型series:[{// 定义图表名称name:"宝马",radius:"70%",//设置饼状图大小//pie:表示图表类型为饼状图type:'pie',// 图表数据data:[{name:"周一", value:'10'},{name:"周二", value:'15'},{name:"周三", value:'13'},{name:"周四", value:'18'},{name:"周五", value:'23'},{name:"周六", value:'31'},{name:"周日", value:'40'},]}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
雷达图配置方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="./js/echarts.min.js"></script><style type="text/css">#box{width: 600px; height: 500px;border: 1px solid #000000;margin: 50px auto;}</style>
</head>
<body><!-- 给图表准备一个容器 --><div id="box"></div><script>// 给容器初始化图表实例var myChart = echarts.init(document.getElementById("box"));// 指定图表配置项和数据var option = {// 定义图表标题title:{text:"汽车销量", //主标题文字},//显示图例说明，把图表数据对应的name值显示出来legend:{},// 显示数据信息，鼠标移动到某节点时，显示详细数据信息tooltip:{},// 雷达坐标系组件，只适用于雷达图radar:{// 雷达图每个指示器名称的配置项name:{textStyle:{color:"#ffffff",backgroundColor:"#999999",padding:[3, 5],borderRadius:5}},// 雷达图的指示器，用来指定雷达图中的多个变量（维度）indicator:[{name:"周一", max:20},{name:"周二", max:40},{name:"周三", max:50},{name:"周四", max:50},{name:"周五", max:50},{name:"周六", max:30},{name:"周日", max:30},]},// 系列列表，通过type决定图表类型series:[{//radar:表示图表类型为雷达图type:'radar',// 图表数据data:[{name:"奔X",value:[15, 38, 48, 42, 38, 18, 22]},{name:"宝X",value:[16, 28, 49, 49, 41, 23, 25]}]}]};// 把配置项和数据显示出来myChart.setOption(option);</script>
</body>
</html>
JavaScript 音频插件和图表插件相关推荐
- grafana在Linux插件,Grafana图表插件-业务数据（BI）表现增强
昨天写了一下用grafana把我们存在mysql数据库的业务数据用图表的方式进行展现的初步方法. 今天来深入一下,如果内置的图标不够了,有没有什么方法添加新的样式. 例如我们需要在地图上表现我们的业务 ...
- html 圆圈图表插件,10款HTML5动画图表插件
创建一个HTML5网页图表应用已经非常简单,利用Canvas更是能绘制出绚丽的动画效果,也就是说你的HTML5图表能动起来,给人不一样的用户体验.本文就主要来分享一些最常用的HTML5图表插件,不仅外 ...
- sparklines插件_21个实用的Javascript数据图表插件
21个实用的Javascript数据图表插件 六月 16, 2015 评论 (2) Sponsor 今天主要和大家分享一些统计图表相关的JS插件,图表通常用在网站后台界面,作为一种可视化数据形式展示, ...
- html 圆圈图表插件,10款强大的JavaScript图表图形插件
网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器和精密的计算使呈现实时数据变得容易,而且各种向量绘图技术像VML.SV ...
- javascript功能插件大集合 前端常用插件 js常用插件
包管理器 管理着 JavaScript 库,并提供读取和打包它们的工具. npm:npm 是 JavaScript 的包管理器.官网 Bower:一个 web 应用的包管理器.官网 component ...
- JQuery图表插件之Flot
Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ an ...
- java jfreechart下载_jfreechart下载-JFreeChart下载安装[java图表插件]-PC下载网
JFreeChart正式版 JFreeChart正式版是款可以开发各种复杂图表的java图标插件.java图表插件能够开发柱形图.混合图.线图.区域图.分布图.混合图.甘特图以及一些仪表盘等.JFre ...
- excel可视化图表插件_Axure 教程：利用图表前端插件实现高级可视化图表
如何通过图标前端插件完成高级可视化图表?笔者在此给出了详细教程,与大家分享~~ 后台开发中避免不了实现一些可视化的图表,主要制作的方法有四种:Excel表格截图.Axure图形绘制.Axure网页框架 ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明 jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布 本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Hig ...
最新文章
- ajax发送动态字符传,如何发送ajax请求文件与其他字符串的变量？
- 《监控》再起风云，连同创作中的《监控2》成功牵手影视公司
- Spring进行表单验证
- 在JavaScript中生成随机字符串/字符
- android dispatchtouchevent 用法,android – 检测每个触摸事件,而不会覆盖dispatchTouchEvent()？...
- vSphere资源：下载及文档地址
- CSV出力ボタンラッパー(asp.net)[イベントの作り方に役立つ]
- 边缘应用增长 800%，听听 Akamai 边缘部署的经验
- 《c++ const 详细总结》--转载
- Android 系统（4）---Android HAL层与Linux Kernel层驱动开发简介
- 南京趋势科技面试归来
- 菜鸟教程：Js数据类型
- python刷b站视频浏览量_python刷B站播放量
- Centos7虚拟机MySQ连接Hive
- html css依赖管理,composer 管理js css等依赖文件【fxp/composer-asset-plugin】
- SNIP——“自适应”型“狙击”策略 (目标检测)(two-stage)(深度学习)(CVPR 2018)
- PHP - 性能测试工具
- 图像渲染测试软件,Arnold渲染器之aiImage（ai图像）着色器介绍及渲染测试
- MySQL查看表结构及查看建表语句
- 一个WEB页面的访问过程
热门文章
- find python列表_Python基础知识（7）list列表各种操作
- php checkstyle,php codebrowser未正确遵循checkstyle.xml中的路径
- Hive 创建表的三种方式
- Idea中Spring整合MyBatis框架中配置文件中对象注入问题解决方案
- 11，EasyNetQ-调度事件与定时发布
- html中iframe根据子页面内容动态修改高度
- leetcode 203. Remove Linked List Elements(链表)
- LintCode初级题——fizz buzz
- 【实习项目记录】(四)Android 实现手机验证时，按钮倒计时60s
- ubuntu12.04安装搜狗输入法和配置