制作一个简单的音乐播放器的进度条

Maxiye 发布于2019-08-20 16:23 / 1751人阅读

摘要：如果出现该属性，则向用户显示控件，比如播放按钮。如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用，则忽略该属性。要播放的音频的。

因为最近在写一个音乐播放器，本来想做完整个项目再写博客的，但抑制不住我体内的洪荒之力，其实是怕到时候写起来长，就决定把一些知识点梳理出来

先了解一下HTML5出的audio标签

audio的定义

audio标签定义声音，比如音乐或其他音频流

audio标签的常用属性

autoplay 如果出现该属性，则音频在就绪后马上播放。

controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop 如果出现该属性，则每当音频结束时重新开始播放。

preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src 要播放的音频的 URL。

audio DOM的常用属性

autoplay 设置或返回是否在加载完成后随即播放音频/视频

controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）

currentSrc 返回当前音频/视频的 URL

currentTime 设置或返回音频/视频中的当前播放位置（以秒计）

muted 设置或返回音频/视频默认是否静音

duration 返回当前音频/视频的长度（以秒计）

ended 返回音频/视频的播放是否已结束

paused 设置或返回音频/视频是否暂停

played 返回表示音频/视频已播放部分的 TimeRanges 对象

audio DOM的常用方法

load() 重新加载音频/视频元素

play() 开始播放音频/视频

pause() 暂停当前播放的音频/视频

canPlayType() 检测浏览器是否能播放指定的音频/视频类型

audio的用法我们大致上了解了，那么怎么制作自己喜欢的进度条呢？

定制自己喜欢的进度条

定制自己喜欢的进度条，我们需要以下步骤：

将原生的audio控件隐藏

用一个div表示进度条组件

给进度条添加样式

  * {
      margin: 0;
      padding: 0;
    }

    .progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 380px;
      margin: 100px auto;
    }

    .progress-bar {
      position: relative;
      width: 70%;
      height: 5px;
      background-color: #eee;
      vertical-align: 2px;
      border-radius: 3px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0;
      display: inline-block;
      height: 5px;
      width: 70%;
      background: #31c27c;
    }

    .now::after {
      content: "";
      position: absolute;
      left: 100%;
      width: 3px;
      height: 7px;
      background-color: lightblue;
    }

为audio的点击进度条添加事件

  const audio = document.getElementById("music")
  const start = document.querySelector(".start")
  const end = document.querySelector(".end")
  const progressBar = document.querySelector(".progress-bar")
  const now = document.querySelector(".now")

  function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ("0" + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ("0" + second) : second
    return `${minute}:${second}`
  }

  audio.onloadedmetadata = function () {
    end.innerHTML = conversion(audio.duration)
    start.innerHTML = conversion(audio.currentTime)
  }

  progressBar.addEventListener("click", function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + "%"

    audio.currentTime = p * audio.duration
    audio.play()
  })

  setInterval(() => {
    start.innerHTML = conversion(audio.currentTime)
    now.style.width = audio.currentTime / audio.duration.toFixed(3) * 100 + "%"
  }, 1000)

到这里进度条就完成了～～

专线服务私有云播放器进度条 php制作进度条不同颜色的进度条 js制作视频进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82906.html

制作一个简单的音乐播放器的进度条

摘要：如果出现该属性，则向用户显示控件，比如播放按钮。如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用，则忽略该属性。要播放的音频的。因为最近在写一个音乐播放器，本来想做完整个项目再写博客的，但抑制不住我体内的洪荒之力，其实是怕到时候写起来长，就决定把一些知识点梳理出来先了解一下HTML5出的audio标签 audio的定义 audio标签定义声音，比如音乐或其他音频流 ...

tomato 2019-08-05 11:14 评论0 收藏0
HTML5实例教程——制作酷炫音频播放器插件

摘要：播放控制在播放器的界面绘制完成后，首先我们需要做的是为播放上一首下一首这三个主要的控制按钮添加对应的事件监听。上述的按钮点击的事件监听中，我们通过调用原始的元素的和方法来控制音频的播放和暂停。到这里，播放器已经基本成型了。 showImg(https://segmentfault.com/img/bVkoOI); demo download 上图便是这个音频播放器的UI界面图，里面...

荆兆峰 2019-08-02 18:05 评论0 收藏0
♥基于H5+js开发一款音乐播放器

前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。文章目录：一.开发环境：二.页面视图：1.主文件入口（首页）：2.音乐播放界面：三.功能实现（1）、index.html：（2）、播放音乐（music.html）：（3）、样式文件（index.css）：四.项目地址：一.开发环境：开发工具：HbuliderX；框架：Vant，Mui，V...

BearyChat 2021-09-29 09:34 评论0 收藏0
使用Vue2.0制作音乐播放器

摘要：基于的音乐播放器音乐该应用使用全家桶完成，借助音乐来实现音乐搜索播放，应用持续更新中源代码源代码地址如果觉得还不错的大家可以给个我会持续更新的附音乐整理效果图在线预览在线预览地址音乐播放器端请在浏览器的移动端模式下查看使用使用依赖目基于Vue2.0的音乐播放器（QQ音乐API）该应用使用Vue全家桶完成，借助QQ音乐api来实现音乐搜索播放，应用持续更新中... 源代码源代码地址...

taoszu 2019-08-20 16:22 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

RaoMeng 2019-08-20 14:26 评论0 收藏0