开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从<audio>播放器中获取audio.duration并通过单击将其保存到div？

从播放器中获取音频的持续时间并将其保存到div的过程可以通过以下步骤完成：

创建一个HTML页面，包含一个播放器和一个用于显示持续时间的div元素。

<!DOCTYPE html>
<html>
<head>
  <title>获取音频持续时间</title>
</head>
<body>
  <audio id="audioPlayer" src="audio.mp3"></audio>
  <button onclick="saveDuration()">保存持续时间</button>
  <div id="durationDiv"></div>

  <script>
    function saveDuration() {
      var audio = document.getElementById("audioPlayer");
      var duration = audio.duration;
      var durationDiv = document.getElementById("durationDiv");
      durationDiv.innerHTML = "音频持续时间：" + duration + "秒";
    }
  </script>
</body>
</html>

在上述代码中，我们使用<audio>元素来创建一个播放器，并设置src属性为音频文件的URL。我们还创建了一个按钮，当单击按钮时，将调用saveDuration()函数。
在saveDuration()函数中，我们首先通过document.getElementById()方法获取到audioPlayer元素和durationDiv元素。然后，我们使用audio.duration属性获取音频的持续时间，并将其保存到一个变量中。
最后，我们将持续时间显示在durationDiv元素中，通过设置innerHTML属性来修改div的内容。

这样，当用户单击按钮时，音频的持续时间将被获取并显示在div中。

请注意，上述代码中的音频文件URL应该替换为实际的音频文件URL。此外，还可以根据需要对页面进行样式和布局的调整。

相关搜索:如何从Gridview中的下拉列表中获取值，并通过ajax和jquery将其传递给我的web服务？如何从localStorage中获取key的值，并通过钩子将其放入输入？如何从word文档中获取所有内容并使用php将其显示在div中？如何从两行中获取mysql数据，并通过连接逗号分隔值将其显示在单行中？如何获取json文件并通过字符串值对其进行过滤，并将其放入div中提交表单材料-选择日期如何将spring boot部署到heroku？选择多个主机PowerShell VSCode中的CSS Peek问题在垫子选择器中显示月份和年份

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

和我一起写一个音乐播放器，听一首最伟大的作品

后面的代码中，我们利用了 ts-audio 提供给的方法，比如 play() 和 pause()，通过按钮上绑定的点击事件函数调用它们。...之后，我们通过歌曲数组映射到歌曲的 src，我们将其传递给 files 参数。请记住，我们必须将它作为一个数组传入，然后 map() 方法通过调用一个函数来生成一个新的数组。...解决问题当我们单击下一个或上一个按钮时，我们正在重新计算值并导致重新渲染。...> ); } 在上面的代码块中，我们从 App.js 文件中获取 props，然后在 Player.js 文件中处理它们。...最后，我们学习了如何使用 ts-audio 结合 React构建一个可用的音乐播放器。

3382 0

HTML简单音乐播放器「建议收藏」

device-width, initial-scale=1.0"> html音乐播放器...的paused属性来检测当前音频是否已暂停 true:暂停 false:播放中 function playPause(){ if(audio.paused){...seekT = event.clientX - seekBarPos.left; //获取当前鼠标在进度条上的位置 seekLoc = audio.duration * (seekT / sArea.outerWidth...durMinutes = Math.floor(audio.duration / 60); durSeconds = Math.floor(audio.duration - durMinutes...* 60); // 计算播放进度百分比 playProgress = (audio.currentTime / audio.duration) * 100;

4K3 0

SoundCloud的web播放库Maestro演进之路

我们将稍微介绍一下我们使用MSE和Web Audio API的内容，但首先，让我们看看该audio 标签为我们做了些什么。 audio 如果浏览器支持解码，则可以获取音频文件的URL并进行播放。...然后我们可以处理自己下载媒体并将其附加到缓冲区。这意味着我们可以进行优化，如：预加载，这是我们在您单击播放按钮时，将其存储在内存中，预先下载我们认为您将播放的音频文件的前几秒。...然后当您单击播放时，我们将此数据直接从内存中添加到缓冲区，而不必从网络获取： const audio = document.createElement('audio'); const mse = new...这意味着时间getPosition()总是有意义的，用户在seek时可以保证它不会跳转，并覆盖它。 播放器实现包含在单独的包中，并且它们都扩展BasePlayer。...一个测试play()如果在播放请求完成之前播放器被释放，则另一个测试会被拒绝并返回正确的报错。还有一些测试可以检查播放器是否在检测到不一致时报错。

1.2K3 0

HTML5 VideoAPI，打造自己的Web视频播放器

本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 ?.../video/mv.mp4"> 注意：audio和video元素必须同时包含开始和结束标签，不能使用这样的空元素语法形式。...每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量 autoplay：autoplay：如果出现该属性，则视频在就绪后马上播放。...如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。...loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放 preload：auto、mete、none：告诉浏览器如何下载音频 auto：让浏览器下载整个文件，以便用户单击播放按钮时就能播放

4.8K4 0

HTML5+Ajax实现音乐播放器

本文播放器的音乐是通过豆瓣FM的API获取到的。Demo美观简单，可自行扩展其功能，本文作者「张新望zxw 」，来源于「简书」，已经获得转载许可，点击「阅读原文」就可以跳转原地址。...播放器的音乐是通过豆瓣FM的API获取到的，我们可以随机的听到豆瓣FM的任何音乐。(这些API是饥人谷的老师整理的)，音乐播放器美观如图： ?...-- 背景图片 --> 这里就不写css的代码了，大家可以直接看源文件或者从开发者工具中去看。...myAudio.currentTime == myAudio.duration){ getmusic() } } HTML5中audio

9.2K4 0

基于react的H5音频播放器

> 组件相关的样式如下： /* 播放器相关代码 */ .audio-progress-bar{ width: 100%; height: 4px...进度条的大致原理就是获取音频的当前播放时长以及音频总时长的比例，然后通过这个比例与进度条宽度相乘，可以得到当前播放时长下进度条需要被填充的宽度。...代码中的“audio-progress-bar-preload”是用来做缓冲条的，大概的做法也是一样，不过获取缓冲进度得用到audio的buffered属性，具体的用法推荐大家去MDN看看，在这里就不多赘述...this.lectureAudio.duration / this.progressBar.clientWidth; //moveX是一个固定的常数，它代表着进度条宽度与音频总时长的关系，我们可以通过获取触点移动的距离从而计算出此时对应的...currentTime，这也是开发时的刻意为之，最后会发现这个组件中的唯一变量就是currentTime，我们可以通过currentTime的变化完成所有的需求，并且不需要考虑其他因素的影响，因为所有的子组件都是围绕着

8K1 0

如何将旧的Android设备变成酷炫有用的小工具（Internet Online entertainment)

不过，可能您只是将它们装在抽屉中作为紧急备份。但是，存在更好的选择，可以让您继续从老化的设备中获取价值。例如，您可以下载Google地图以创建专用的车载GPS导航器，也可以将其变成网络摄像头。...通过浏览到任何网页来测试连接。第2步：从Google Play商店下载网络摄像头应用。其中许多应用程序都可与PC客户端组件配合使用，该组件可安装网络摄像头驱动程序并连接计算机。...单击安装按钮，并允许该应用安装到您的设备。如果需要，请单击“设置”选项，或者在应用程序中按“启动服务器”或类似选项。摄像机视频图像将出现在手机上。步骤3：在远程设备上配置查看媒体。...如果您只需要将图像保存到手机的存储器或将其上传到云，则可能无需执行此步骤。首先，在与电话连接到同一路由器的台式机或便携式计算机上打开Web浏览器。您在上一步中在电话上配置了此网络。...否则，请转到Google Play商店并搜索媒体应用。确定您想要哪种音乐播放器。例如，您要从流媒体应用程序中获取离线音乐吗？还是要从PC上存储本地文件？

1.4K4 0

基于H5的音乐播放器开发（1）（前端篇）

预览地址：http://doc.djtao.net/cms/media/audio 这是我个人练习的小项目。基于koa2-iview+less定制。用于个人对播放器的复习。...("#audio"); this.audio = audio; this.currentTime = audio.currentTime; // 获取播放时长 this.audio.addEventListener...-- 进度显示 --> </div...cover.classList.remove('cover-play'); } }, div.play是绝对定位，通过监听进度百分比来变动数值。...需要在两个地方监听error事件：播放过程中，设置播放时。 // 播放暂停设置 setplay() { if (!

2.9K3 1

AVKit框架详细解析（二） —— 基于视频播放器的画中画实现（一）

在本教程中，您将学习如何向使用 UIKit 构建的现有视频应用程序添加画中画支持。...在项目导航器中单击 RickTV 项目，然后单击Signing & Capabilities。注意：对 RickTV target执行以下步骤时，Xcode 可能会崩溃。...2）单击 + Capabilit。 3）搜索Background Modes，然后双击将其添加为功能。...此操作可能会失败，因此您将其包装在 do catch 块中。构建并运行。播放视频，您将在播放器控制器中看到画中画图标。成功！点按画中画图标以查看它是否有效。...现在，构建并运行。播放视频并进入画中画模式。现在启动画中画会关闭自定义播放器控制器，并关闭画中画窗口。但是，如果您点按按钮以从画中画返回标准全屏播放，继续播放相同的视频，则没有任何反应。

2.7K1 0

【融职培训】Web前端学习第2章网页重构11 HTML5新增标签

二、html5布局标签在此前我们学习的内容中，网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义，让网页更具可读性，新增了 header nav aside article...三、html5媒体标签在html之前的版本中，如果我们需要在网页中插入音频或是视频，需要安装额外的插件，但是从html5版本之后，我们就可以直接通过一个标签来实现音频和视频的展示功能。...音频标签通过audio标签，我们可以直接在在网页中嵌入音乐播放器，audio标签的src属性可以指定音乐文件，代码如下所示： 1 打开上面的网页，我们就可以听到来自源文件media/music.mp3的音乐了，我们又遇到了新的问题，如何对音乐播放器做进一步的设置呢...1 通过audio标签，我们可以很方便地在网页中嵌入音乐播放器，如果掌握了JavaScript

5983 0

Web前端学习第2章网页重构11 HTML5新增标签

二、html5布局标签在此前我们学习的内容中，网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义，让网页更具可读性，新增了 header nav aside article...三、html5媒体标签在html之前的版本中，如果我们需要在网页中插入音频或是视频，需要安装额外的插件，但是从html5版本之后，我们就可以直接通过一个标签来实现音频和视频的展示功能。...音频标签通过audio标签，我们可以直接在在网页中嵌入音乐播放器，audio标签的src属性可以指定音乐文件，代码如下所示： 1 打开上面的网页，我们就可以听到来自源文件media/music.mp3的音乐了，我们又遇到了新的问题，如何对音乐播放器做进一步的设置呢...1 通过audio标签，我们可以很方便地在网页中嵌入音乐播放器，如果掌握了JavaScript

7015 0

回到基础：理解 JavaScript DOM

Javascript DOM 有许多不同的方法可以用，不过这些最常见：按 ID 获取元素 getElementById() 方法用于通过其 id 获取单个元素。...我们来看一个例子： 1var title = document.getElementById(‘header-title’); 我们得到 id 为 header-title 的元素，并将其保存到变量中。...1var listItems = document.getElementsByTagName(‘li’); 这里我们获取 HTML 文档中所有得 li 元素并将它们保存到变量中。...这意味着你可以通过id、class、tag和所有其他有效的 CSS 选择器获取元素。在这里我列出了一些最常用的选项。...添加元素 1var div = document.createElement(‘div’); 在这里我们用了 createElement() 方法创建一个 div 元素，该方法将标记名作为参数并将其保存到变量中

2.5K3 0

【小白必看】使用Python爬取喜马拉雅音频并保存的示例代码

前言本文介绍了如何使用Python中的requests库来获取音频文件并保存到本地。...在这个例子中，我们使用了喜马拉雅平台上的一个API接口来获取音频ID和名称，并使用这些信息构造音频地址，然后通过发送HTTP请求将音频内容下载保存到本地。...首先，它构造了获取音频地址的链接audio_src，然后发送GET请求获取响应并解析出音频地址audio_url。接下来，它再次发送GET请求获取音频的内容，并将其保存到以音频名称命名的文件中。...我们使用 requests.get() 方法再次发送GET请求，获取音频地址的响应，并将其保存到变量 src 中。...结束语通过本文，我们学习了如何使用Python中的requests库来处理HTTP请求，并结合喜马拉雅平台的API接口完成了音频文件的下载和保存。

4481 0

优化Jupyter Notebook：提示，技巧，nbextension，Productivity tips

快捷键按Ctrl+Shift+p或单击菜单栏中的小键盘图标以获取命令调色板列表命令和编辑模式中的快捷方式： Shift + Enter 运行当前单元格，在下面选择 Ctrl + Enter 运行选定的单元格...pip install 通过在$符号前面添加shell命令中的Python变量：魔术命令 Magic Commands是一种快捷方式，可显着扩展NoteBook的功能从NoteBook...➡列出所有环境变量 %env var ➡获取var的值 %env var val➡为var设定值在shell中运行命令： %system ➡使用shell（主要用于获取当前目录，日期等）使用以下方法将...NoteBook自动保存到其检查点%autosave ：每120秒自动保护（2分钟）执行不同的语言： %%HTML ➡执行HTML代码 %%perl ➡在子进程中执行Perl %%javascript...让尝试使用chesterish主题将其更改为黑暗模式。

4.8K2 0

vuejs之构建简易音乐播放器

-- 播放器主体区域 --> <img src...1、搜索音乐并显示在标签前加上： var vue = new Vue({ el: "#player", data: {...在浏览器的console中： ? 歌曲都是在data--result-songs下的。...将musicUrl地址放入到播放器中： <img src

8942 0

多媒体编程

title>这是一个模拟图片翻转的dome js如下 // 获取元素...脚本化音频和视频 h5中引用了两个变迁audio和video两个标签 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio https...-- 文本用做后备内容 ---> 播放器不支持 Audio构造函数 Audio()构造函数类似Image()函数例如.../chime.wav").play(); // 载入并播放声音效果这是音频的api，视频没有这个api 类型选择和加载使用的是canPlayType进行的原型为 HTMLMediaElement.canPlayType...controls表示在浏览器中是否显示控件true为显示，false为隐藏，查询媒体状态他们有一些只读的属性，描述当前的状态。

1.4K1 0

《从案例中学习JavaScript》之酷炫音乐播放器（一）

之前写的《js常用方法和一些封装》系列暂且告一段落，接下来，我会通过各种案例，来分享javascript的各种技巧，所以最终将这个系列的名称定为：《从案例中学习JavaScript》,回想到自己初学编程时候的各种艰辛...市面上充斥着各种多少多少天从入门到精通的书籍，我曾经也花了好多大洋，满怀信心地买了类似的书，结果我就零基础从入门到蒙逼了。...利用audio标签渲染一个播放器 audio是h5的一个标签，以上代码表示创建了一个播放器，并且播放文件指向了1....Paste_Image.png 接下来，让这个div盒子相对于body居中。还记得上一节《js常用方法和一些封装》-- 时间相关（附案例详解）吗，里面就有一个现成的居中方法，还有获取元素的方法。...在这个案例中 ,是有定位的，所以就相对于它居中了。了解原因之后，我们来给屏幕区域加一个position吧！

1.8K9 0

W3C：开发专业媒体制作应用(6)

在左上角有一个源视频查看器，用于加载视频源，然后将它们剪辑并添加到时间线中。在底部有一个时间轴，用以展示了各种轨迹，以及这些轨迹中的片段。在右上角有一个序列播放器，它可以播放正在构建的时间轴。...在转场特效方面，可以实现模糊，或是简单的圆擦除，并将其添加到时间轴上。该工具在回放方面有相当高的性能。可以在时间轴上任意移动，并将剪辑、转场以及所有的效果渲染到序列播放器中。...WebCodecs 之前，讲者使用的是 WebAssembly，所以建立了自己的解码器，用 WebAssembly 编译了这些解码器，并在 Web Worker 中使用这些解码器对码流进行解码、缓冲，然后将其用于在播放器中需要的快速...获取解码后的视频后，将其转换为纹理，然后混合多个视频轨道的纹理，并通过 WebGL 将其显示在画布上。...目前，开发工具只能选择一个线程并单击暂停按钮。它将暂停工作线程或主线程。但是当有很多线程时，开发人员必须一个接一个地点击暂停按钮或继续按钮。在这方面，讲者认为可以参考流行的 IDE 的调试习惯。

9181 0

AVKit框架详细解析（四） —— 基于AVKit 和 AVFoundation框架的视频流App的构建

您将看到的第一个是当前位于手机存储中的类型。稍后，您将学习如何从服务器播放视频流。...这就是应用程序如何用数据填充现有列表的方式。视频本身来自嵌入在应用程序包中的 JSON 文件。如果您好奇，您可以查看 Video.swift 以了解它们是如何获取的。...2）在这里，您获取 url 并创建一个 AVPlayer 对象。 AVPlayer 是在 iOS 上播放视频的核心。 播放器对象可以启动和停止您的视频，更改其播放速率，甚至可以调高和调低音量。...如何从远程 URL 添加视频播放？那一定要难很多！转到 VideoFeedView.swift 并找到设置videos的位置。...3）当有人单击播放器视图时，您可以添加一个侦听器。这会切换视频的静音状态。注意：确保首先添加双击侦听器，然后单击。如果你反过来做，双击监听器将永远不会被调用。

6.9K1 0

❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️

直接跳到末尾获取完整源码今天我将带着大家使用 HTML、CSS 和 JS创建音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。...打开app.js文件并开始编码。...active也从播放列表部分删除类。现在让我们 JS 使这个音乐应用程序功能齐全。 ✨ navigation 导航部分我们的音乐播放器中有三个部分。...因此，如果您对此代码有任何疑问，请随时在讨论中问我。我们的导航完成了。所以让我们创建我们的音乐播放器。 music 音乐部分对于音乐播放器，我们的页面中需要一个音频源，但现在我们没有。...播放器、导航栏、播放列表、轮播图，刷新，音量加减等等 wuhu ! 起飞 ! 希望通过本文，您已经学会了如何使用 HTML、CSS 和 JS 的在线音乐播放器。

8K6 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭