网页音乐播放器(html+css+原生js)

已于 2024-08-21 12:02:41 修改
阅读量766 收藏 6
点赞数 4
分类专栏： 网站/网页 文章标签： javascript 开发语言 服务器 html5 css
于 2024-05-16 21:46:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71927437/article/details/138722596
版权

想自己试做一个小网站，于是边学边做，也有了一个可以用的成品，想着拿出来并简单聊聊。

 决定先做一个音乐播放器。以下是我参考的文章，成品也是在这位作者的基础上改来的。

纯HTML+CSS+JS制作音乐播放器（附源码）_html音乐播放器代码-CSDN博客

 界面设计

功能预览

1. 播放模式

  • 列表循环
  • 单曲循环
  • 随机播放

2. 加载行为

  • 分页加载(也许？)
  • 加载视觉效果
  • 从上次退出时的位置播放

3. 用户交互

  • 键盘操作
  • 滚动列表更新
  • 搜索
  • 歌词(5.30更新)

具体实现

因为算是初学，写得不算好，请见谅。

注意,因为内容很多,在这里只会展示部分,如需源码请见文末. 同时,最新内容也仅在源码处展示

页面布局

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="shortcut icon" href="/static/img/ico.webp">
    <link rel="stylesheet" href="/static/css/audio_player_5_6.css">
    <title>Audio Player</title>
</head>
<body id="body">
<div class="base-alert-box"></div>
<div class="upper-container">
    <!-- 音乐介绍 -->
    <div class="introduction-container">
        <div id="text-container" class="text-container">
            <div id="music-title">音乐</div>
            <div class="author-container">作曲家：
                <span id="author-name">未知</span>
            </div>
            <div class="author-container">专辑：
                <span id="album-name">未知</span>
            </div>
        </div>
    </div>
</div>

<!-- 音乐播放器主要内容 -->
    <div class="audio-box">
        <div class="audio-container">
            <audio id="audioTag"></audio>
            <!-- 进度条 -->
            <div class="a-progress">
                <div class="pgs-total" id="progress-total">
                    <div class="pgs-loading" id="progress-loading"></div>
                    <div class="pgs-play" id="progress" style="width: 0;"></div>
                </div>
            </div>
            <!-- 下排控制按钮 -->
            <div class="a-controls">
                <!-- 播放时长 -->
                <div class="time-container">
                    <span class="played-time" id="playedTime">00:00</span>&nbsp;/&nbsp;
                    <span class="audio-time" id="audioTime">00:00</span>
                </div>
                <!-- 中间按钮 -->
                <div class="center-button-container">
                    <!-- 播放模式 -->
                    <div id="playMode" class="center-icon mode"></div>
                    <!-- 上一首 -->
                    <div id="skipForward" class="center-icon s-right"></div>
                    <!-- 暂停按钮 -->
                    <div id="playPause" class="icon-play"></div>
                    <!-- 下一首 -->
                    <div id="skipBackward" class="center-icon s-left"></div>
                    <!-- 音量调节 -->
                    <div id="volume" class="center-icon volume"></div>
                    <!-- 音量悬浮窗 -->
                    <label for="volume-toggle"></label>
                    <input type="range" id="volume-toggle" name="change" value="50" min="0" max="100" step="1">
                </div>
                <!-- 后部按钮 -->
                <div class="bottom-button-container">
                    <!-- 列表 -->
                    <div id="list" class="bottom-icon list"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 音乐列表 -->
    <div class="close-list" id="close-list"></div>
    <div class="music-list" id="music-list">
        <div class="music-list-container">
            <div class="music-list-title">播放队列</div>
            <hr class="line">
            <ul class="all-list" id="all-list"></ul>
            <img id="loading" src="/static/img/svg/loading.svg" width="20" alt="">
        </div>
    </div>
</body>
<script type="text/javascript" src="/static/js/audio_player/audio_player_var_5_11.js"></script>
<script type="text/javascript" src="/static/js/audio_player/audio_player_data-5_11.js"></script>
<script type="text/javascript" src="/static/js/audio_player/audio_player_listener_5_11.js"></script>
</html>

CSS

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    backdrop-filter: blur(40px);
    transition: 200ms;

    /*CSS3去除手机浏览器按钮点击出现的高亮框*/
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(40px);
}

html,
body {
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

.upper-container {
    width: 80%;
    height: 80%;
}

.introduction-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
}

.text-container {
    width: 80%;
    transition: 200ms;
}

.scroll-wrap {
    max-width: 100%;
}

.scroll-item {
    animation: scroll linear 6s alternate infinite;
}

#music-title {
    color: rgba(255, 255, 255, .888);
    font-size: 4rem;
    line-height: 6rem;
}

.author-container {
    color: rgb(171, 171, 171);
    font-size: medium;
}

/* 歌词 */
.lyric-title {
    position: absolute;
    top: 0;
    mix-blend-mode: difference;
    color: white;
    pointer-events: none;
    transition: 200ms;
}

.lyric-box {
    display: none;
    position: absolute;
    top: 10%;
    width: 90%;
    height: 70%;

    overflow: hidden;
    font-size: 20px;
    color: white;
    pointer-events: none;
    transition: 250ms ease-out;
}

/* 直接使用class定位到ul似乎会导致列表样式概率消失 */
.lyric-box ul {
    padding: 0;
    position: relative;
    top: 40%;
    list-style: none;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    transition-duration: 600ms;
}

.lyric-box ul li {
    height: 25px;
    line-height: 25px;
    margin-top: 25px;
    transition: 200ms;
    opacity: .4;
}

.lyric-box ul li span {
    cursor: pointer;
}

.lyric-box ul li span span {
    font-size: 12px;
    pointer-events: none;
}

.lyric-box ul .highlight-line {
    color: #17E883;
    opacity: 1;
}

.lyric-box ul .near-line {
    opacity: 1;
}

/* 歌词调整 */

.lyric-calibration {
    position: absolute;
    display: flex;
    left: 0;
    top: 40%;
    flex-direction: column;
    z-index: 10;
}

.lyric-calibration img {
    margin: 5px 0;
    cursor: pointer;
    opacity: .4;
}

.lyric-calibration img:hover {
    opacity: .6;
}

.lyric-calibration img:active {
    opacity: 1;
}

#lyric-offset {
    text-align: center;
    font-size: 12px;
}

/* 播放器样式设置*/
.audio-box {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 设置超出部分隐藏，方便改变图标颜色 */
    overflow: hidden;
}

.audio-container {
    width: 90%;
}

/* 进度条样式 */
.a-progress {
    width: 100%;
    color: #42b680;
    background-color: transparent;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.pgs-total {
    width: 100%;
    height: 16px;
    background-color: transparent;
    border-radius: 10px;
    position: relative;
    touch-action: none;
}

.a-progress .pgs-total:after,
.a-progress .pgs-total .pgs-loading,
.a-progress .pgs-total .pgs-play:before,
.a-progress .pgs-total .pgs-play:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    bottom: 7px;
}

.a-progress .pgs-total:after {
    background-color: #bbbbbb;
    border-radius: 10px;
    z-index: -1;
}

.a-progress .pgs-total .pgs-loading {
    display: none;
    box-shadow: #1affb2 0 5px 5px;
    animation: loadingProgressBar 1200ms ease-out alternate infinite;
}

.a-progress .pgs-total .pgs-play:before {
    background-color: #42b680;
    border-radius: 10px;
    z-index: 1;
}

.a-progress .pgs-total .pgs-play {
    height: 100%;
    position: relative;
    border-radius: 10px;
}

.a-progress .pgs-total .pgs-play:after {
    top: 4px;
    left: 100%;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #FFFFFFFF;
}

/* 下排控制按钮样式*/
.a-controls {
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
}

/* 时间样式 */
.time-container {
    float: left;
    color: white;
    font-weight: 300;
    line-height: 50px;
    white-space: nowrap;
}

.played-time {
    left: 15px;
    text-align: left;
}

.audio-time {
    right: 15px;
    text-align: right;
}

/* 中间部分按钮 */
.center-button-container {
    width: 35%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-button-container > * {
    cursor: pointer;
}

.center-icon {
    float: left;
    min-width: 30px;
    min-height: 30px;
    margin: 0 10px 0 10px;
    outline: none;
}

.center-icon:hover {
    opacity: .7;
}

.center-icon:active {
    opacity: .9;
}

.icon-pause, .icon-play, .s-left, .lyric, .mode, .s-right, .volume {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.s-left {
    background-image: url("/static/img/audio/ico/next.svg");
}

.icon-play {
    float: left;
    min-width: 50px;
    min-height: 50px;
    background-image: url("/static/img/audio/ico/play.svg");
}

.icon-pause {
    float: left;
    min-width: 50px;
    min-height: 50px;
    background-image: url("/static/img/audio/ico/pause.svg");
}

.lyric {
    background-image: url("/static/img/audio/ico/lyric.svg");
}

.s-right {
    background-image: url("/static/img/audio/ico/per.svg");
}

.volume {
    background-image: url("/static/img/audio/ico/volume.svg");
}

/* 尾部按钮 */
.bottom-button-container {
    float: left;
    margin: 15px 0;
    pointer-events: none;
    width: 30%;
}

.bottom-icon {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    pointer-events: initial;
}

.bottom-icon:hover {
    opacity: .7;
}

.bottom-icon:active {
    opacity: .6;
}

.list {
    background-image: url("/static/img/audio/ico/list.svg");
    background-size: cover;
}

/* 音乐列表 */
.close-list {
    display: none;
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}

.music-list {
    display: none;
    position: fixed;
    height: 100%;
    right: 0;
    top: 0;
    background-color: rgba(153, 153, 153, .6);
}

.music-list-container {
    width: 100%;
}

.search {
    position: absolute;
    padding: 10px;
    right: 0;
    width: 20px;
    cursor: pointer;
}

.search:hover {
    opacity: .7;
}

.search:active {
    opacity: .5;
}

.search-bar {
    position: fixed;
    top: 20px;
    left: 100%;
    width: 0;
    height: 0;

    font-size: 15px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(8px);
    border: none;

    transition: 200ms ease-out;
}

.music-list-title {
    text-align: center;
    color: white;
    font-size: 2rem;
    font-weight: 300;
    padding: 10% 15% 0;
}

.line {
    height: 1px;
    width: 90%;
    border: none;
    border-top: 1px dashed #3d3d3d;
}

.all-list {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0;
    max-height: 80%;

    overflow-y: scroll;
    scrollbar-width: none;
    list-style-type: none;
}

::-webkit-scrollbar {
    display: none;
}

.all-list li {
    min-width: 80%;
    max-width: 80%;
    min-height: 50px;

    color: white;
    font-weight: 300;
    margin-top: 10px;
    padding: 0 5px 0 5px;

    overflow: hidden;
    white-space: nowrap;

    transition: 150ms;
}

.all-list-li-activate,
.all-list li:hover {
    min-width: 90%;
    background-color: rgb(150, 182, 156);
    cursor: pointer;
}

.list-card-show {
    animation: showAni;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.list-card-hide {
    animation: hideAni;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@media (min-width: 767px) {
    .lyric-box ul .highlight-line {
        font-size: 25px;
    }

    .time-container {
        width: 35%;
    }

    .close-list {
        width: 70%;
    }

    .music-list {
        width: 30%;
    }
}

@media (max-width: 767px) {
    .lyric-box {
        font-size: 15px;
    }

    .lyric-box ul .highlight-line {
        font-size: 20px;
    }

    .time-container {
        width: 25%;
        visibility: hidden;
    }

    .played-time, .audio-time {
        visibility: initial;
        position: absolute;
        bottom: 14%;
    }

    .close-list {
        width: 25%;
    }

    .music-list {
        width: 75%;
    }

    #volume, #volume-toggle, #lyric {
        display: none;
    }
}

@keyframes hideAni {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes showAni {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes rotateAni {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes loadingProgressBar {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*横条样式*/
#volume-toggle {
    width: 150px;
    min-width: 50px;
    height: 5px;
    appearance: none;
    background-color: #dcdcdc;
    outline: none;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgb(91, 91, 91);
}

/*拖动块的样式*/
#volume-toggle::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1px;
    height: 5px;
    border-radius: 50%;
    background: #42b680;
    cursor: pointer;
    border: 4px solid #33333300;
    box-shadow: -407px 0 0 400px #42b680;
}

#loading {
    display: none;
    margin: 10px 50% 0 50%;
    animation: rotateAni 1s infinite;
}

#audio-player {
    display: none;
}

JS (最新的设计请查看GitHub)

更新音乐列表数据

从后端获取到的音乐列表将被储存到一个对象中,不知道多少条会出现明显的性能问题。对于内存占用,在一百条时程序共使用2.1MB左右。

然后,所有关于静态资源的地址都需要根据自己的项目地址更改。

/**
 * 从后台获取音乐列表;
 *
 * 注意,不要随意调用此函数, 您应该尽可能使用switchAudio
 * @param {IUpdateData,{}} opts
 * */
async function updateData(opts = {}) {
    const defaultOpts = {
        init: false,
        newIndex: 0,
        ...opts
    }

    // 检查
    if ((!defaultOpts.init && defaultOpts.newIndex >= MaxAudioCount) || defaultOpts.newIndex < 0) {
        AudioIndex = POST_DATA['audio_index'];
        throw RangeError('超出最大获取范围');
    }

    // 发送的信息
    POST_DATA['audio_index'] = defaultOpts.newIndex;
    POST_DATA['search_string'] = v.SearchInputBar.value.toString().trim();

    // 显示加载图标
    v.LoadingIco.style.display = 'block';

    // 后台获取
    const response = await baseFetch('/audio/audio_lists', {
        body: JSON.stringify(POST_DATA)
    });
    const json = await response.json();

    if (!json) {
        POST_DATA['audio_index'] = AudioIndex;
        throw Error('Fetch fail');
    }

    // 隐藏加载图标
    setTimeout(() => v.LoadingIco.style.display = 'none', 2000);

    // 更新所有全局信息, 并启动后续任务
    if (json['status'] !== 1009) {
        createAlert(json['msg'], 'danger');
        throw Error('Error fetching data');
    }

    Object.assign(AudioObject, json['audio_dict']);

    MaxAudioCount = Number(json['item_counts']);

    if (AudioIndexRange) {
        const tempArray = Object.keys(AudioObject);
        AudioIndexRange = tempArray.length === MaxAudioCount ? null : [Number(tempArray[0]), Number(tempArray.pop())];
        if (AudioIndex >= MaxAudioCount) AudioIndex = AudioIndexRange[1];
    }

    createChildLi(AudioObject).catch();
}

展示列表更新

/**
 * 创建音乐列表
 * @param {Object} obj 标准音频列表格式
 * */
async function createChildLi(obj) {
    if (v.ListParentUl.children.length === MaxAudioCount) return;

    if (isEmpty(obj)) {
        v.ListParentUl.textContent = '无结果';
        return;
    }

    const frag = document.createDocumentFragment();

    const paragraph = (value) => {
        const p = document.createElement('p');
        p.textContent = `${value[0]} - ${value[1]} - ${value[2]}.${value[3]}`;
        return p;
    }

    const entries = Object.entries(obj);
    const len = entries.length;
    let index = 0;

    const updateBatch = () => {
        // 每次更新20个元素
        const batchSize = 20;
        for (let i = 0; i < batchSize && index < len; i++, index++) {
            const [key, value] = entries[index];
            const liElement = document.createElement('li');
            liElement.setAttribute('id', `li-${key}`);
            liElement.appendChild(paragraph(value));
            frag.appendChild(liElement);
        }

        if (index < len) {
            requestAnimationFrame(updateBatch);
            return;
        }
        v.ListParentUl.textContent = '';
        v.ListParentUl.appendChild(frag);
        highlightChosenSelection(false);
    }
    requestAnimationFrame(updateBatch);
}

初始化音乐及展示信息

在这里,背景图片以及音乐地址,音乐信息将被加载

// 加载音乐数据
function initAudio() {
    // 本地保存当前Audio index
    localStorage.setItem('audio_index', AudioIndex.toString());

    // 加载图标
    v.ProgressLoading.style.display = 'block';

    // 设置背景图片
    NewImgUrl = `/static/img/audio/webp/audio-${ImgNum}.webp`;
    ImgNum = (ImgNum + 1) % AllImgCount;

    // 预加载图片
    TempImgEle.src = NewImgUrl;

    // 设置音频信息
    ;[v.Author.textContent, v.AudioTitle.textContent, v.Album.textContent] = [...AudioObject[AudioIndex]];
    v.LyricTitle.textContent = v.AudioTitle.textContent;

    v.AudioTitle.removeAttribute('class');
    if (v.AudioTitle.clientWidth >= v.TextContainer.clientWidth) v.AudioTitle.className = 'scroll-item';

    // 更改URL
    const href = new URL(window.location.href);
    const params = new URLSearchParams(href.search);
    params.set('audio_index', AudioIndex.toString());
    params.set('search', v.SearchInputBar.value.toString());
    href.search = params.toString();
    history.replaceState(null, '', href.href);

    // 设置音乐, 并在加载后播放
    v.AudioEle.src = `/audio/play/${AudioObject[AudioIndex][4]}`;
    v.AudioEle.load();
}

滚动列表更新

移动端和桌面端方法

export const slideToUpdateFn = debounce(() => {
    if (!AudioIndexRange) return;

    const scrollTop = v.ListParentUl.scrollTop;
    const clientHeight = v.ListParentUl.offsetHeight;
    const scrollHeight = v.ListParentUl.scrollHeight;

    // 判断滚动方向
    const directionDown = ScrollUConfig.beforeScrollTop <= scrollTop;

    ScrollUConfig.beforeScrollTop = scrollTop;

    const [first, last] = AudioIndexRange;

    const shouldUpdateDown = directionDown &&
        (scrollTop + clientHeight + ScrollUConfig.threshold >= scrollHeight) &&
        (last + 1 < MaxAudioCount);

    const shouldUpdateUp = scrollTop <= ScrollUConfig.threshold && first - 1 >= 0;

    if (shouldUpdateDown) switchAudio(last + 1, {refresh: false, scroll: false});
    else if (shouldUpdateUp) switchAudio(first - 1, {refresh: false, scroll: false});
}, 100);
export const wheelingToUpdateFn = debounce((event) => {
    if (!AudioIndexRange) return;

    const scrollTop = v.ListParentUl.scrollTop;
    const clientHeight = v.ListParentUl.offsetHeight;
    const scrollHeight = v.ListParentUl.scrollHeight;

    const directionDown = event.deltaY > 0;

    const [first, last] = AudioIndexRange;

    const shouldUpdateDown = directionDown && last + 1 < MaxAudioCount && scrollTop + clientHeight + 20 >= scrollHeight;
    const shouldUpdateUp = !directionDown && first - 1 >= 0 && scrollTop === 0;

    if (shouldUpdateDown) switchAudio(last + 1, {refresh: false, scroll: false});
    else if (shouldUpdateUp) switchAudio(first - 1, {refresh: false, scroll: false});
}, 200);

下载链接

全部代码

github: AudioPlayer源码

Tritium238
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)
努力是为了站在万人之中，成为别人的光
09-13 4万+
直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。 ❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️???? 在线演示地址???? 完整代码结构???? home-section 首页部分???
HTML5+CSS3实现的列表式音乐播放器特效源码
11-07
HTML5+CSS3实现的列表式音乐播放器特效源码 HTML5+CSS3实现的列表式音乐播放器特效源码
20个免费为您的网站和博客提供的音频播放器
woiweb
10-29 1562
之前，我为大家准备了 21个为您的网站和博客提供的免费视频播放器，在本文中我爱互联网将给您提供一些免费的在线音频播放器，在线音频播放器允许任何人在他们的站点和博客上添加，比如常见的音乐网站及其他个性的网站中。在这篇文章中，我已编制了20个免费为您的网站和博客提供的音频播放器，希望能帮助你节省时间找到适合你的一个。   1. Zanorg Player 如果你正为你的站点或博客寻找一些简易的能...
基于Java+Vue网络视频播放器设计和实现(源码+LW+调试文档+讲解等)
最新发布
全网粉丝10W+、全栈领域优质创作者、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
07-08 891
Java的主要特点是简单性、面向对象、分布式、健壮性、安全性和可移植性。Java的设计初衷是让程序员能够以优雅的方式编写复杂的程序。它支持 Internet 应用的开发，并内建了网络应用编程接口，极大地便利了网络应用的开发。同时，Java的强类型机制和异常处理功能确保了程序的健壮性。Java分为三个主要版本：Java SE（标准版），主要用于桌面应用程序开发；Java EE（企业版），用于开发企业级应用；Java ME（微型版），专门用于嵌入式系统和移动设备应用开发。
【HTML+js 简易的音乐播放器（包含原理解释）】
weixin_44085193的博客
05-22 9059
为了符合工作需求和学习目标，笔者最近正在学习HTML多媒体相关的内容，其中的一个重点便是音乐播放器，但纵观大部分网站提供的源码及教程，都并未出现相对完整的HTML音乐播放器教学，结合我这几天的学习和实践，总结了一套相对简单的HTML音乐播放器集成代码，在此向大家演示并解释该播放器的内容和愿意，希望能帮助到更多愿意学习web编程的人及业内人员。
HTML简单音乐播放器
热门推荐
路漫漫其修远兮，吾将上下而求索。
03-01 5万+
HTML简单音乐播放器
原声html+css+js 实现简单的音乐播放器
m0_64520392的博客
05-28 4278
原声html+css+js 实现简单的音乐播放器
简易网页音乐播放器
MorningLight_LQ的博客
06-07 5385
简易网页音乐播放器 开发工具与关键技术：DW2021 jQuery HTML5 撰写时间：2021年 5月 28日 简介与要点：在网页上制作一个音乐播放器我们仅需用到一个新的标签<audio src="素材音乐" controls></audio>；因为我们这个音乐播放不是单曲循环的使用还要...
用html5写一个音乐播放器
canduecho的专栏
08-27 5206
这只是一个简单的示例，你可以根据你的需求进一步自定义和扩展播放器的功能。如果你希望实现更复杂的音乐播放器，可能需要使用一些现成的音频播放器库或框架。如果你想要增加更多的功能，如自定义样式、播放列表、自动播放等，你可能需要使用JavaScript来操作音频元素。在上面的示例中，我们使用了自定义的样式来布局播放器，并添加了自定义的播放和暂停按钮，通过JavaScript代码实现了播放和暂停功能。在HTML5中创建一个简单的音乐播放器时，你可以使用``元素来实现。音乐播放器
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在构建一个基于HTML+CSS+JavaScript的原生购物网站首页案例时，我们需要理解这三个技术的核心概念以及它们如何协同工作来创建动态、交互式的网页。以下是一些相关知识点的详细说明： 1. **HTML（HyperText Markup ...
原生html+css+js+jQuery网页demo.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
网页版-音乐播放器，可以下来玩玩
04-23
简单的网页音乐播放器，适合小白练习。文件包括html，原生js。
html播放器代码大全
05-11
html网页播放器代码1.avi格式代码片断如下：
HTML5+CSS3网页设计模板(30例)zip
03-15
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、视觉吸引人的网页提供了强大的工具。这个"HTML5+CSS3网页设计模板(30例)"压缩包文件包含了一系列现成的设计模板，适合初学者和专业设计师用于学习和...
原生html+css+js 制作的小网页合集.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖)
02-18
原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖页面（炫酷抽奖），js+html+css!原生抽奖...
html网页制作之音乐播放器
不蒸馒头曾口气的博客
03-05 2178
【代码】html网页制作之音乐播放器。
网站音乐播放器源码
m0_59088506的博客
05-01 2557
一起白嫖，简要快速的建立一个网站音乐播放器，在我研究一番之后直接给大家总结出结果一共四个文件。
纯HTML+CSS+JS制作音乐播放器（附源码）
qq_51895395的博客
05-01 1万+
代码中使用到的包括图片、视频、音频等所有素材仅为展示使用，相互之间没有任何关联，如有需要可自行更改。GitHub - falysha/musicPlayer: 原生HTML+CSS+JS，未使用任何框架。
html+css+js原神音乐会实现
11-03
要实现HTML CSS JS原神音乐会，我们可以通过以下步骤完成。 首先，我们需要创建一个HTML文件作为网页的主要结构。在HTML文件中，我们可以使用div元素来创建不同的节目列表和播放器。 接下来，我们可以使用CSS来美化我们的页面。我们可以使用CSS选择器来选择特定的元素，并为其添加样式，例如背景颜色、字体、边框等。我们还可以使用CSS动画来增加交互效果，例如当鼠标悬停在音乐链接上时，呈现渐变颜色或是文字放大的效果。 在HTML文件中，我们需要在head标签里引入JavaScript文件。接下来，我们可以使用JavaScript来处理用户的交互和音乐播放功能。 对于音乐播放功能，我们可以使用原生的HTML5音频标签来加载和播放音乐。例如，我们可以创建一个音频标签，并为其添加src属性，指定要播放的音乐文件。我们还可以使用JavaScript来控制音频标签的播放和暂停功能，并通过添加事件监听器来实现自动播放或播放结束后自动切换到下一曲目。 为了增加交互性，我们可以使用JavaScript和DOM (Document Object Model)来创建按钮，并为其添加点击事件，例如上一曲、下一曲和音量控制按钮。当点击按钮时，我们可以使用JavaScript来控制音频标签的相关属性和方法。 最后，为了让我们的页面更具有吸引力，我们可以通过添加一些原神的主题元素，例如游戏角色的图片和背景音乐，来改变整体的视觉效果。 通过以上的步骤，我们可以实现一个HTML CSS JS原神音乐会，使用户能够浏览和播放不同的原神音乐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值