星光菌子 2023-05-30 18:23 采纳率: 45.5%
浏览 24
已结题

html 音乐播放器逻辑

请问要实现一个音乐播放器，是不是写完样式和交互之后，那把video元素隐藏，点击播放把音乐的src给到video把音乐的封面给到那个装封面地div就行？
我是这么想的，不知道对不对

  • 写回答

2条回答 默认 最新

  • Snape2323 2023-05-30 19:00
    关注

    你的想法基本上是正确的,在实现音乐播放器时,可以使用video元素标签来处理音频播放,同时通过CSS样式和交互来控制其外观和行为,可以参考下这个小示例,应该可以帮到你

    <!DOCTYPE html>
<html>
<head>
  <title>音乐播放器</title>
  <style>
    .music-player .player {
      display: none; /* 初始状态下隐藏video元素 */
    }
  
    .music-player .cover {
      /* 设置封面样式 */
    }
  
    .music-player .controls {
      /* 设置控制按钮样式 */
    }
  </style>
</head>
<body>
  <div class="music-player">
    <div class="cover">
      <!-- 封面图像显示在这里 -->
    </div>
    <video class="player" controls>
      <!-- 音乐文件将在这里播放 -->
    </video>
    <div class="controls">
      <button class="play-button">播放</button>
    </div>
  </div>

  <script>
    // 获取元素
    const player = document.querySelector('.player');
    const cover = document.querySelector('.cover');
    const playButton = document.querySelector('.play-button');

    // 监听播放按钮点击事件
    playButton.addEventListener('click', () => {
      // 更新video的src和显示封面
      player.src = '音乐文件的URL';
      cover.style.backgroundImage = 'url(封面图像的URL)';

      // 显示video元素
      player.style.display = 'block';

      // 播放音乐
      player.play();
    });
  </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

  • 请问前端登录的业务逻辑各公司都一样吗 前端
    2022-03-11 12:38
    回答 2 已采纳 对差不了多少 ，大致就是这样 。 1.先登录 然后 存储 token .2.所有接口 统一加上token3.token 有效 且 在时效内 。方可返回数据 有的时候 token 有时效 ，这个具体
  • workerman刷新前端的逻辑 websocket 微信小程序
    2023-03-28 14:27
    回答 1 已采纳 您可以通过 WebSocket 将新数据推送给客户端，在接收到新数据的客户端页面，使用 JavaScript 动态更新页面上的内容。 具体来说，当用户在 a 页面发布了数据时，将该数据发送到服务器，服
  • (Python html) 将python结果写入html，面临简单的布局错误 html python 前端
    2023-01-13 15:26
    回答 1 已采纳 看下这篇博客，也许你就懂了，链接：Python的简单爬取html中的数据
  • HTML5可视化mp3音乐播放器代码
    2021-04-06 15:08
    HTML5可视化mp3音乐播放器是一种利用现代浏览器的HTML5技术来实现的音频播放解决方案，它不仅能够播放音频，还能将音频数据转化为可视化的图形，为用户带来更丰富的音乐体验。这种播放器的核心在于HTML5的`<audio>`...
  • ui控件绘制的底层逻辑 c++ html5 ui
    2023-01-24 17:03
    回答 1 已采纳 疑问1: 是的，不同的前端框架和库最终都会调用操作系统提供的基础图形绘制函数来绘制界面。 疑问2: 操作系统的界面也是调用显卡驱动程序提供的硬件功能来绘制的。这些硬件功能可能比普通应用程序能访问到的功
  • 信贷分类，逻辑回归问题 python 算法 逻辑回归
    2022-10-17 11:58
    回答 1 已采纳 https://zhuanlan.zhihu.com/p/491980170
  • php前端传参问题后端接收 javascript php 前端
    2021-09-19 14:12
    回答 1 已采纳 导航页面链接加上对应参数，比如 ?index=home然后index界面$_GET["index"]，再判断index等于什么什么，再从后端输出内容
  • HTML5迷你音乐播放器特效
    2021-07-24 19:21
    HTML5迷你音乐播放器特效是利用现代Web技术，特别是HTML5和Vue.js框架，构建的一款轻量级且功能丰富的MP3音乐播放器。这个播放器不仅适用于个人网站，还可以为各种在线音乐平台提供一个简洁而高效的用户体验。接下来...
  • ts中keyof的逻辑 typescript 前端
    2022-04-21 17:20
    回答 1 已采纳 key可以是string或者number。明明声明的是为string，但是可以是number的原因是从JavaScript对象获取某个key的值时，会自动将键入的key转为字符串。
  • JS代码逻辑感觉有些疑惑 javascript 前端
    2022-03-20 15:58
    回答 1 已采纳 删除b对像中的context属性，js的用法，有点意思。有用采纳一下
  • 一个离散数学的逻辑问题 学习方法 逻辑回归
    2023-01-31 13:53
    回答 1 已采纳 证明：命题“所有偶数都是素数”是错误的证明：命题“所有偶数都是素数”是错误的。证明：通过数字13的例子可以知道，P(x)不一定能推出E(x)，所以E(x)->P(x)是假的。由析取三段论得出E(
  • 扁平html5音乐播放器代码
    2021-04-02 01:32
    【扁平html5音乐播放器代码】是一款现代且简洁的网页音乐播放器，它结合了jQuery库和HTML5的媒体元素功能，为用户提供了一种直观、易于操作的音乐播放体验。这种播放器的设计理念是扁平化，符合当前流行的界面设计...
  • html模板获取参数失败 html java spring
    2022-08-15 11:49
    回答 3 已采纳 终于找到问题了，处在了数据的问题上，在处理新增帖子的这个需求时，没有给新增的帖子设置对应的userId，导致了出现去查询帖子对应的user出现了null值，为了检查这个问题，我在后端使用map的get
  • JS+html5制作简单音乐播放器
    2020-10-20 02:20
    在本文中，我们将详细探讨如何使用JavaScript (JS) 和HTML5来制作一个简单的音乐播放器。HTML5 的 `<audio>` 标签使得在网页上嵌入音频内容变得非常容易，它允许开发者直接在网页上播放音频文件，而无需额外的插件，...
  • 前端音乐播放器
    2018-06-20 12:16
    【前端音乐播放器】是一种基于Web技术实现的音乐播放应用程序，它允许用户在浏览器中直接播放音频文件，无需额外安装任何软件。这类播放器通常利用HTML、CSS和JavaScript等前端技术构建，为用户提供友好的界面和便捷...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月7日
  • 已采纳回答 5月30日
  • 创建了问题 5月30日

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀