html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)

html5 Audio音乐播放器(canvas圆形音乐播放进度条)

主要用到的是 audio 和canvas,我们下来介绍下着来年哥哥标签以及它们的api:

  1. audio
属性属性值注释
srcurl播放音乐的url地址
preloadload/auto预加载
looploop循环播放
controlscontrols是否显示默认的控制按钮
autoplayautoplay自动播放



各大浏览器对音乐格式的支持情况

音频格式Chrome FirefoxIE9 OperaSafari
OGG支持支持支持
MP3支持不支持支持
WAV不支持支持不支持

属性

属性Chrome Firefox
duration获取媒体文件的总时长,以秒(S)为单位,如果无法获取返回NaN
paused如果媒体文件被暂停,那么paused属性返回true,反之false
ended如果媒体文件播放完毕返回true
muted用来获取是否为静音状态,值为bool
volume控制音量的属性,值为0-1;0 为最小,1为最大
startTime返回起始的播放时间
error返回错误的代码,额uull的时候为正常,否则可以通过Music.error.code来获取具体繁荣错误代码:
currentTime用来获取或者控制当前的播放时间,单位是秒(S)
currentSrc以字符串的形式返回正在播放或者已经加载的文件

函数作用
load()加载音频,视频
play()播放
pause()暂停播放
canPlayType()测试是否支持给定类型文件

常用的事件

事件名称事件作用
loadstart客户端开始请求数据
progress客户端正在请求数据,缓冲
play
pause
ended
timeupdate当前播放时间发生改变的时候
canplaythrough歌曲已经载入完全
canplay缓冲至目前可播放的状态

2.canvas

方法描述
fill()填充当前绘图(路径)
stroke()绘制已定义的路径
beginPath()起始一条路径,或重置当前路径
moveTo()把路径移动到画布中的指定点,不创建线条
closePath()创建从当前点回到起始点的路径
lineTo()添加一个新点,创建从该点到最后指定点的线条
clip()从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc()创建弧/曲线(用于创建圆形或部分圆)
translate重新定义坐标系

3 创建一个audio标签 和canvas标签,如下:

<audio id="music" src="wuding.mp3" controls="controls" preload="auto">
    Your browser does not support the audio element.
</audio>
<canvas id="canvas"></canvas>

4 用js控制canvas画圆


    var music = document.getElementById('music');
    //绑定timeupdate事件
    music.addEventListener('timeupdate',function(){
        if (!isNaN(music.duration)) {
            var progressValue = music.currentTime/music.duration; //用时间比来获取进度条的值
            if(progressValue == 1){
                progressValue=0;//当播放完成,进度条跳到开始
            }
            drawCircle(canvas,progressValue);

        };
    },false);
    drawCircle = function (canvas, percentage) {
        var clientWidth = document.documentElement.clientWidth;
        var canvasWidth = Math.floor(clientWidth * 200 / 750);
        var innerR = canvasWidth * 0.8 * 0.5;//半径
        var ctx;
        canvas.setAttribute('width', canvasWidth + 'px');
        canvas.setAttribute('height', canvasWidth + 'px');
        if (canvas.getContext) {
            ctx = canvas.getContext('2d');
        }
        ctx.translate(canvasWidth / 2, canvasWidth / 2);
        ctx.beginPath();
        ctx.arc(0, 0, innerR, 0, Math.PI * 2, false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#F0F0F0";
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, 0, innerR, Math.PI * 3 / 2, (Math.PI * 3 / 2 + Math.PI * 2 / 180 + percentage * Math.PI * 2), false);
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#EEBD44";
        ctx.stroke();
    };

    drawCircle(document.getElementById('canvas'),0);

5 效果图如下:

这里写图片描述

6 扩展,可以不需要自带的默认播放控件,自己设计按钮 或图片的形式 来控制 音乐播放

7 问题:对于移动端页面 要适配各种手机屏,对于手机适配的问题 我们经常用rem单位 来处理,但是canvas 不支持rem ,所以需要用js 获取到客户端的手机屏宽度 进行转化,具体怎么做,下次再讲!

  • 10
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用Vue3和Canvas实现的圆形音乐播放进度条的示例代码: ```html <template> <div class="progress-bar"> <canvas ref="canvas" width="200" height="200"></canvas> <div class="progress-value">{{ progress }}%</div> </div> </template> <script> import { onMounted, onUnmounted, reactive } from 'vue' export default { setup() { const canvasRef = ref(null) const progress = reactive({ value: 0 }) let canvas, ctx, radius, center // 绘制进度条 const drawProgressBar = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.lineWidth = 10 ctx.strokeStyle = '#ccc' ctx.beginPath() ctx.arc(center, center, radius, 0, 2 * Math.PI) ctx.stroke() ctx.lineWidth = 10 ctx.strokeStyle = '#f00' ctx.beginPath() ctx.arc(center, center, radius, -Math.PI / 2, Math.PI * 2 * progress.value / 100 - Math.PI / 2) ctx.stroke() ctx.fillStyle = '#f00' ctx.beginPath() ctx.arc(center, center, radius - 20, 0, 2 * Math.PI) ctx.fill() } // 初始化画布和进度条 const init = () => { canvas = canvasRef.value ctx = canvas.getContext('2d') radius = canvas.width / 2 - 10 center = canvas.width / 2 drawProgressBar() } // 监听进度变化 const updateProgress = (value) => { progress.value = value drawProgressBar() } onMounted(() => { init() }) onUnmounted(() => { canvas = null ctx = null }) return { canvasRef, progress, updateProgress } } } </script> <style> .progress-bar { position: relative; width: 200px; height: 200px; } .progress-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; } </style> ``` 在上面的代码中,我们使用了Vue3的`setup`函数来定义组件的逻辑。首先,我们使用`ref`函数创建了一个引用,它指向`canvas`元素。然后我们使用`reactive`函数创建了一个响应式数据对象`progress`,它包含一个`value`属性,用来表示进度条的进度。接着我们定义了一些变量和函数来初始化和绘制进度条,并且在组件挂载和卸载时分别执行了它们。最后,我们返回了一些数据和方法,让其他组件可以使用它们来更新进度条的进度。 在模板中,我们使用了`canvas`元素来绘制进度条。我们还添加了一个表示进度百分比的文本,它使用了CSS来进行定位和样式设置。 在组件中,我们通过监听音乐播放进度的变化来更新进度条的进度。具体的实现方式可以根据你的需要进行调整。例如,你可以在`mounted`钩子中添加一个计时器,来定期更新进度条的进度

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值