实战教程:如何用JavaScript构建一个功能强大的音乐播放器,兼容本地与在线资源

news2024/7/7 16:11:31

项目地址:Music Player App

作者:Reza Mehdikhanlou

视频地址:youtube

我将向您展示如何使用 javascript 编写音乐播放器。我们创建一个项目,您可以使用 javascript 从本地文件夹或任何 url 播放音频文件。

项目目录

  • assets
    • 1.jpg
    • 1.mp3
    • 2.jpg
    • 2.mp3
    • 3.jpg
    • 3.mp3
  • index.html
  • index.js
  • style.css

代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Music Player App</title>
</head>

<body>

    <div class="background">
        <img src="" id="bg-img">
    </div>

    <div class="container">
        <div class="player-img">
            <img src="" class="active" id="cover">
        </div>

        <h2 id="music-title"></h2>
        <h3 id="music-artist"></h3>

        <div class="player-progress" id="player-progress">
            <div class="progress" id="progress"></div>
            <div class="music-duration">
                <span id="current-time">0:00</span>
                <span id="duration">0:00</span>
            </div>
        </div>

        <div class="player-controls">
            <i class="fa-solid fa-backward" title="Previous" id="prev"></i>
            <i class="fa-solid fa-play play-button" title="Play" id="play"></i>
            <i class="fa-solid fa-forward" title="Next" id="next"></i>
        </div>

    </div>

    <script src="index.js"></script>
</body>

</html>

index.js

const image = document.getElementById('cover'),
    title = document.getElementById('music-title'),
    artist = document.getElementById('music-artist'),
    currentTimeEl = document.getElementById('current-time'),
    durationEl = document.getElementById('duration'),
    progress = document.getElementById('progress'),
    playerProgress = document.getElementById('player-progress'),
    prevBtn = document.getElementById('prev'),
    nextBtn = document.getElementById('next'),
    playBtn = document.getElementById('play'),
    background = document.getElementById('bg-img');

const music = new Audio();

const songs = [
    {
        path: 'assets/1.mp3',
        // path:'https://childish.oss-cn-hangzhou.aliyuncs.com/songs/Peel%20Back%20the%20Heart.mp3'
        displayName: 'The Charmer\'s Call',
        cover: 'assets/1.jpg',
        artist: 'Hanu Dixit',
    },
    {
        path: 'assets/2.mp3',
        displayName: 'You Will Never See Me Coming',
        cover: 'assets/2.jpg',
        artist: 'NEFFEX',
    },
    {
        path: 'assets/3.mp3',
        displayName: 'Intellect',
        cover: 'assets/3.jpg',
        artist: 'Yung Logos',
    }
];

let musicIndex = 0;
let isPlaying = false;

function togglePlay() {
    if (isPlaying) {
        pauseMusic();
    } else {
        playMusic();
    }
}

function playMusic() {
    isPlaying = true;
    // Change play button icon
    playBtn.classList.replace('fa-play', 'fa-pause');
    // Set button hover title
    playBtn.setAttribute('title', 'Pause');
    music.play();
}

function pauseMusic() {
    isPlaying = false;
    // Change pause button icon
    playBtn.classList.replace('fa-pause', 'fa-play');
    // Set button hover title
    playBtn.setAttribute('title', 'Play');
    music.pause();
}

function loadMusic(song) {
    music.src = song.path;
    title.textContent = song.displayName;
    artist.textContent = song.artist;
    image.src = song.cover;
    background.src = song.cover;
}

function changeMusic(direction) {
    musicIndex = (musicIndex + direction + songs.length) % songs.length;
    loadMusic(songs[musicIndex]);
    playMusic();
}

function updateProgressBar() {
    const { duration, currentTime } = music;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;

    const formatTime = (time) => String(Math.floor(time)).padStart(2, '0');
    durationEl.textContent = `${formatTime(duration / 60)}:${formatTime(duration % 60)}`;
    currentTimeEl.textContent = `${formatTime(currentTime / 60)}:${formatTime(currentTime % 60)}`;
}

function setProgressBar(e) {
    const width = playerProgress.clientWidth;
    const clickX = e.offsetX;
    music.currentTime = (clickX / width) * music.duration;
}

playBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', () => changeMusic(-1));
nextBtn.addEventListener('click', () => changeMusic(1));
music.addEventListener('ended', () => changeMusic(1));
music.addEventListener('timeupdate', updateProgressBar);
playerProgress.addEventListener('click', setProgressBar);

loadMusic(songs[musicIndex]);

style.css

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

html{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background{
    position: fixed;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
}

.background img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    min-width: 50%;
    min-height: 50%;
    filter: blur(15px);
    -webkit-filter: blur(50px);
    transform: scale(1.1);
}

.container{
    background-color: #e7e7e7;
    height: 500px;
    width: 400px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

.container:hover{
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.player-img{
    width: 300px;
    height: 300px;
    position: relative;
    top: -50px;
    left: 50px;
}

.player-img img{
    object-fit: cover;
    border-radius: 20px;
    height: 0;
    width: 0;
    opacity: 0;
    box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5);
}

.player-img:hover img{
    box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.8);
}

.player-img img.active{
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    opacity: 1;
}

h2{
    font-size: 25px;
    text-align: center;
    font-weight: 500;
    margin: 10px 0 0;
}

h3{
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    margin: 10px 0 0;
}

.player-progress{
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin: 40px 20px 35px;
    height: 6px;
    width: 90%;
}

.progress{
    background-color: #212121;
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

.music-duration{
    position: relative;
    top: -25px;
    display: flex;
    justify-content: space-between;
}

.player-controls{
    position: relative;
    top: -15px;
    left: 120px;
    width: 200px;
}

.fa-solid{
    font-size: 30px;
    color: #666;
    margin-right: 30px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.fa-solid:hover{
    filter: brightness(40%);
}

.play-button{
    font-size: 44px;
    position: relative;
    top: 3px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1894343.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安卓请求服务器[根据服务器的内容来更新spinner]

根据服务器的内容来更新spinner 本文内容请结合如下两篇文章一起看: 腾讯云函数node.js返回自动带反斜杠 腾讯云函数部署环境[使用函数URL] 现在有这样一个需求,APP有一个下拉选择框作为版本选择,因为改个管脚就变成一个版本,客户需求也很零散,所以后期会大量增加版本,这时候每…

数据结构——树的基础概念

目录 1.树的概念 2.树的相关概念 3.树的表示 &#xff08;1&#xff09;直接表示法 &#xff08;2&#xff09;双亲表示法 (3)左孩子右兄弟表示法 4.树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 1.树的概念 树是一种非线性的数据结构&#xff0…

找不到msvcp120.dll无法继续执行的原因分析及解决方法

在计算机使用中&#xff0c;经常会遇到msvcp120.dll文件丢失的情况&#xff0c;很多人对这个文件不是很熟悉&#xff0c;今天就来给大家讲解一下msvcp120.dll文件的丢失以及这个文件的重要性&#xff0c;让大家更好地了解计算机&#xff0c;同时也可以帮助我们更好地掌握这个文…

EVM-MLIR:以MLIR编写的EVM

1. 引言 EVM_MLIR&#xff1a; 以MLIR编写的EVM。 开源代码实现见&#xff1a; https://github.com/lambdaclass/evm_mlir&#xff08;Rust&#xff09; 为使用MLIR和LLVM&#xff0c;将EVM-bytecode&#xff0c;转换为&#xff0c;machine-bytecode。LambdaClass团队在2周…

leetcode216.组合总和III、40.组合总和II、39.组合总和

216.组合总和III 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9 每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回。 示例 1: 输入: k 3, n 7 输出…

【Spring Boot 源码学习】初识 ConfigurableEnvironment

《Spring Boot 源码学习系列》 初识 ConfigurableEnvironment 一、引言二、主要内容2.1 Environment2.1.1 配置文件&#xff08;profiles&#xff09;2.1.2 属性&#xff08;properties&#xff09; 2.2 ConfigurablePropertyResolver2.2.1 属性类型转换配置2.2.2 占位符配置2.…

单调栈(左小大,右小大)

①寻找每个数左边第一个比它小的数 给定一个长度为 N 的整数数列&#xff0c;输出每个数左边第一个比它小的数&#xff0c;如果不存在则输出 −1。 输入样例&#xff1a; 3 4 2 7 5 输出样例&#xff1a; -1 3 -1 2 2 从左到右遍历&#xff0c;用单调递增&#xff08;栈底到栈顶…

Spring MVC 中 使用 RESTFul 实现用户管理系统

1. Spring MVC 中 使用 RESTFul 实现用户管理系统 文章目录 1. Spring MVC 中 使用 RESTFul 实现用户管理系统2. 静态页面准备2.1 user.css2.2 user_index.html2.3 user_list.html2.4 user_add.html2.5 user_edit.html 3. SpringMVC环境搭建3.1 创建module&#xff1a;usermgt3…

操作审计(一)

操作审计&#xff08;一&#xff09; 前言一、快速查询事件二、高级查询事件总结 前言 这里主要记录操作审计的过程&#xff0c;操作审计其实就是监控并记录阿里云账号的活动&#xff0c;可以使用阿里云的操作审计服务来审计最近90天阿里云账号下的操作&#xff0c;从而确保云…

纯正刊!IF不降反升,国人通过率高>98%,29天录用!无“爆雷”风险

本周投稿推荐 SCI • 能源科学类&#xff0c;1.5-2.0&#xff08;来稿即录25天&#xff09; • 计算机类&#xff0c;2.0-3.0&#xff08;纯正刊29天录用&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&a…

PhpStorm 2024 for Mac PHP集成开发工具

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

sql查询练习

1.表的结构 课程表&#xff1a;课程编号cid&#xff0c;课程名称canme&#xff0c;老师tid&#xff0c; 教师表&#xff1a;教师tid&#xff0c;教师姓名tname 分数表&#xff1a;学生student_sid&#xff0c;课程 cours_id&#xff0c;&#xff0c;分数score 学生表&#xff…

谷粒商城-个人笔记(集群部署篇二)

前言 ​学习视频&#xff1a;​Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强​学习文档&#xff1a; 谷粒商城-个人笔记(基础篇一)谷粒商城-个人笔记(基础篇二)谷粒商城-个人笔记(基础篇三)谷粒商城-个人笔记(高级篇一)谷粒商城-个…

【SSL 1823】消灭怪物(非传统BFS)

题目大意 小b现在玩一个极其无聊的游戏&#xff0c;它控制角色从基地出发&#xff0c;一路狂奔夺走了对方的水晶&#xff0c;可是正准备回城时&#xff0c;发现地图上已经生成了 n n n 个怪。 现在假设地图是二维平面&#xff0c;所有的怪和角色都认为是在这个二维平面的点上…

鸿翼夯实统一AI基础设施,加速大模型落地释放AI“模”力!

从“百模大战”到“千模大战”&#xff0c;全球通用大模型数量快速增加&#xff0c;将大模型融入企业&#xff0c;建立企业自身的AI基础设施&#xff0c;打造行业或特定领域、任务的专用大模型&#xff0c;助力生产力革新和产业升级&#xff0c;已经成为目前企业关注的核心。 大…

Asp .Net Core 系列:基于 Castle DynamicProxy + Autofac 实践 AOP 以及实现事务、用户填充功能

文章目录 什么是 AOP &#xff1f;.Net Core 中 有哪些 AOP 框架&#xff1f;基于 Castle DynamicProxy 实现 AOPIOC中使用 Castle DynamicProxy实现事务管理实现用户自动填充 什么是 AOP &#xff1f; AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&a…

实验二 图像的代数运算

一、实验目的&#xff1a; 1&#xff0e;了解图像的算术运算在数字图像处理中的初步应用。 2&#xff0e;体会图像算术运算处理的过程和处理前后图像的变化。 二、实验内容&#xff1a; 1&#xff0e;图像的加法运算 图像相加一般用于对同一场景的多幅图像求平均效果&…

c语言回顾-内存操作函数

目录 前言 1.memcpy 函数 1.1函数介绍 1.2与strcpy的区别 1.3memcpy的模拟 2.memmove 函数 2.1函数介绍和使用 2.2函数的模拟 3.memset函数 3.1函数介绍 3.2函数的模拟 4.memcmp函数 4.1函数的使用 4.2函数的模拟 结束语 前言 在动态内存的章节中小编详细讲解了动…

pandas数据分析(7)

组合DataFrame 连接 如果只是要将多个DataFrame粘合在一起&#xff0c;那么concat函数是最佳选择。在默认情况下&#xff0c;concat会将DataFrame按行粘合在一起&#xff0c;同时会将各列自动对齐。 如果想要按列进行粘合&#xff0c;需要将axis设置为1&#xff1a; concat的特…

​香橙派AIpro测评:usb鱼眼摄像头的Camera图像获取

一、前言 近期收到了一块受到业界人士关注的开发板"香橙派AIpro",因为这块板子具有极高的性价比&#xff0c;同时还可以兼容ubuntu、安卓等多种操作系统&#xff0c;今天博主便要在一块832g的香橙派AI香橙派AIpro进行YoloV5s算法的部署并使用一个外接的鱼眼USB摄像头…