JavaScript 中的简单音频播放器-js教程-PHP中文网

首页

web前端

js教程

JavaScript 中的简单音频播放器

Susan Sarandon

Oct 23, 2024 am 06:23 AM

Simple Audio Player in JavaScript

JavaScript 名声不佳，但它也有自己的优势。也许其中最好的一点是它可以在网络浏览器中运行。如果您使用 Rust 或 Julia 创建程序，该程序的用户需要在他或她的 PC 上安装该语言。即使您使用 Docker 将程序及其在该容器中运行所需的所有内容容器化，用户仍然需要安装 Docker 才能运行它。

但是每个人都有一个网络浏览器。对于像这个小型音频播放器这样的简单程序，JavaScript 的工作效果出奇地好。只需不到 40 行代码，并且仅使用 html 文件和 javascript 文件，您就可以创建一个在 Web 浏览器中播放音频的简单播放器。它很基本，但简单又优雅。它可以播放 .mp3、.wav、.ogg 和其他一些格式。

这是代码 - 将第一个文件保存为index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Audio Player</title>
    <style>
        body {
            background-color: #a3e4d7; /* Change HEX color */
        }
    </style>
</head>
<body>
    <h1>Simple Audio Player</h1>
    <input type="file" id="fileInput" accept="audio/*">
    <audio id="audioPlayer" controls>
        Your browser does not support the audio element.
    </audio>
    <button onclick="playAudio()">Play</button>
    <button onclick="pauseAudio()">Pause</button>
    <script src="script.js"></script>
</body>
</html>

将第二个文件另存为 script.js - 将其放在与 index.html 文件相同的文件夹/目录中

const audioPlayer = document.getElementById('audioPlayer');
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function() {
    const file = this.files[0];
    const url = URL.createObjectURL(file);
    audioPlayer.src = url;
});

function playAudio() {
    audioPlayer.play();
}

function pauseAudio() {
    audioPlayer.pause();
}

转到包含两个文件的文件夹，然后单击 index.html 文件 - 您的浏览器应打开播放器，您将看到用于选择文件的框 - 从您的电脑中选择 .wav 或 .mp3。

注意：index.html 代码中有一个地方可以更改播放器窗口的背景颜色 - 尝试不同的十六进制颜色。

本·桑托拉 - 2024 年 10 月

以上是JavaScript 中的简单音频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Laravel 教程

1601

PHP教程

1502

276

显示更多

Related knowledge

如何在node.js中提出HTTP请求？ Jul 13, 2025 am 02:18 AM

在Node.js中发起HTTP请求有三种常用方式：使用内置模块、axios和node-fetch。1.使用内置的http/https模块无需依赖，适合基础场景，但需手动处理数据拼接和错误监听，例如用https.get()获取数据或通过.write()发送POST请求；2.axios是基于Promise的第三方库，语法简洁且功能强大，支持async/await、自动JSON转换、拦截器等，推荐用于简化异步请求操作；3.node-fetch提供类似浏览器fetch的风格，基于Promise且语法简单

JavaScript数据类型：原始与参考 Jul 13, 2025 am 02:43 AM

JavaScript的数据类型分为原始类型和引用类型。原始类型包括string、number、boolean、null、undefined和symbol，其值不可变且赋值时复制副本，因此互不影响；引用类型如对象、数组和函数存储的是内存地址，指向同一对象的变量会相互影响。判断类型可用typeof和instanceof，但需注意typeofnull的历史问题。理解这两类差异有助于编写更稳定可靠的代码。

JavaScript时间对象，某人构建了一个eactexe，在Google Chrome上更快的网站等等 Jul 08, 2025 pm 02:27 PM

JavaScript开发者们，大家好！欢迎阅读本周的JavaScript新闻！本周我们将重点关注：Oracle与Deno的商标纠纷、新的JavaScript时间对象获得浏览器支持、GoogleChrome的更新以及一些强大的开发者工具。让我们开始吧！Oracle与Deno的商标之争Oracle试图注册“JavaScript”商标的举动引发争议。Node.js和Deno的创建者RyanDahl已提交请愿书，要求取消该商标，他认为JavaScript是一个开放标准，不应由Oracle

处理诺言：链接，错误处理和承诺在JavaScript中 Jul 08, 2025 am 02:40 AM

Promise是JavaScript中处理异步操作的核心机制，理解链式调用、错误处理和组合器是掌握其应用的关键。1.链式调用通过.then()返回新Promise实现异步流程串联，每个.then()接收上一步结果并可返回值或Promise；2.错误处理应统一使用.catch()捕获异常，避免静默失败，并可在catch中返回默认值继续流程；3.组合器如Promise.all()（全成功才成功）、Promise.race()（首个完成即返回）和Promise.allSettled()（等待所有完成）

什么是缓存API？如何与服务人员使用？ Jul 08, 2025 am 02:43 AM

CacheAPI是浏览器提供的一种缓存网络请求的工具，常与ServiceWorker配合使用，以提升网站性能和离线体验。1.它允许开发者手动存储如脚本、样式表、图片等资源；2.可根据请求匹配缓存响应；3.支持删除特定缓存或清空整个缓存；4.通过ServiceWorker监听fetch事件实现缓存优先或网络优先等策略；5.常用于离线支持、加快重复访问速度、预加载关键资源及后台更新内容；6.使用时需注意缓存版本控制、存储限制及与HTTP缓存机制的区别。

JS综述：深入研究JavaScript事件循环 Jul 08, 2025 am 02:24 AM

JavaScript的事件循环通过协调调用栈、WebAPI和任务队列来管理异步操作。1.调用栈执行同步代码，遇到异步任务时交由WebAPI处理；2.WebAPI在后台完成任务后将回调放入相应的队列（宏任务或微任务）；3.事件循环检查调用栈是否为空，若为空则从队列中取出回调推入调用栈执行；4.微任务（如Promise.then）优先于宏任务（如setTimeout）执行；5.理解事件循环有助于避免阻塞主线程并优化代码执行顺序。

了解事件在JavaScript DOM事件中冒泡和捕获 Jul 08, 2025 am 02:36 AM

事件冒泡是从目标元素向外传播到祖先节点，事件捕获则是从外层向内传播到目标元素。1.事件冒泡：点击子元素后，事件依次向上触发父级元素的监听器，例如点击按钮后先输出Childclicked，再输出Parentclicked。2.事件捕获：设置第三个参数为true，使监听器在捕获阶段执行，如点击按钮前先触发父元素的捕获监听器。3.实际用途包括统一管理子元素事件、拦截预处理和性能优化。4.DOM事件流分为捕获、目标和冒泡三个阶段，默认监听器在冒泡阶段执行。

超越地图和过滤器的高阶功能的JS综述 Jul 10, 2025 am 11:41 AM

JavaScript数组中，除了map和filter，还有其他强大且不常用的方法。1.reduce不仅能求和，还可计数、分组、展平数组、构建新结构；2.find和findIndex用于查找单个元素或索引；3.some和every用于判断是否存在或全部满足条件；4.sort可排序但会改变原数组；5.使用时注意复制数组避免副作用。这些方法使代码更简洁高效。

See all articles

JavaScript 中的简单音频播放器

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题