整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html多页面实现背景音乐的连续播放,简单处理笔记

在多个HTML页面之间切换时持续播放背景音乐,可以使用JavaScript和localStorage来实现。这里有一个简单的实现方案:

  1. 创建一个隐藏的音频播放器: 在每个HTML页面的<body>标签内添加一个隐藏的音频标签,并设置自动播放和循环播放属性。
  1. 使用JavaScript控制音频状态: 当页面加载时,检查localStorage中是否有音乐正在播放的状态,如果有,则恢复播放。同时,当页面离开时,记录音乐的播放状态到localStorage。

下面是一个简化版的多页面背景音乐连续播放的Demo示例。这个例子包含两个HTML文件:index.html 和 page2.html。请确保你有相应的音频文件(如music.mp3)并放置在与HTML文件相同的目录下。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>首页</title>
        <style>
            #backgroundMusic {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>首页</h1>
        <p>这是首页,背景音乐会持续播放。</p>
        <a href="page2.html">前往第二页</a>

        <audio controls id="backgroundMusic" loop>
            <source src="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" type="audio/mpeg" />
            您的浏览器不支持 audio 元素。
        </audio>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var audio = document.getElementById('backgroundMusic')
                setupMusic(audio)
            })

            function setupMusic(audio) {
                var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0
                var isPlaying = localStorage.getItem('musicPlaying') === 'true'

                audio.currentTime = musicTime
                if (isPlaying) {
                    audio.play().catch(function (error) {
                        console.error('自动播放被阻止:', error)
                    })
                }

                audio.onplay = function () {
                    localStorage.setItem('musicPlaying', true)
                }
                audio.onpause = function () {
                    localStorage.setItem('musicPlaying', false)
                }
                audio.ontimeupdate = function () {
                    localStorage.setItem('musicTime', audio.currentTime)
                }
            }
        </script>
    </body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二页</title>
    <style>
        #backgroundMusic { display: none; }
    </style>
</head>
<body>

<h1>第二页</h1>
<p>切换到第二页,背景音乐仍然连续播放。</p>
<a href="index.html">返回首页</a>

<audio id="backgroundMusic" src="music.mp3" loop></audio>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var audio = document.getElementById('backgroundMusic');
        setupMusic(audio);
    });

    // 与index.html中相同的setupMusic函数,确保音乐播放逻辑一致
    function setupMusic(audio) {/*...函数内容与上文相同...*/}
</script>
</body>
</html>

在这个示例中,index.html 和 page2.html 都包含了相同的JavaScript逻辑来管理背景音乐的播放状态和时间。当用户在页面间导航时,音乐将会无缝继续播放,而不是重新开始。请根据实际需要调整音频文件路径和其他细节。

家好,今天给大家介绍一款,调用酷狗搜索音乐播放API实例html页面源码(图1),实现搜索和音乐播放。送给大家哦,获取方式在本文末尾,需要的朋友可以下载学习

图1

搜索结构显示后,点击播放按钮即可播放,同时会显示歌词,歌词可以关闭,同时可以控制播放模式(图2)

图2

本模板编码:10107,需要的朋友,点击下面的链接后,搜索10107,即可获取。


就爱UI - 分享UI设计的点点滴滴

音频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。缺少声音的网站,就如同人不能说话一样。曾经网页要想播放音频,必须得用第三方插件flash。随着html5标准逐渐普及,如今几乎所有的浏览器都使用html5来播放音频。

目标

  1. 如何设置音频播放?
  2. 支持哪几种音频格式?

音频播放标签--audio

作用是在 HTML 页面中嵌入音频元素,来播放声音文件或者音频流。

网页版的音乐播放器

audio标签的属性

src 音频的播放源(必须)

controls 浏览器自带的控制条(必须)

autoplay 自动播放

loop 循环播放

preload 预加载

音频代码

每一种浏览器自带的音频播放控制器都不一样,但功能都一样。网上看到的播放器,大多数都是改过它的样式。

浏览器自带的音频控制条

支持多个格式--source标签

<audio> 元素支持三种视频格式: MP4, WebM, 和 Ogg。

如果不确定音频格式是哪个格式,可以使用source标签。<source> 元素可以链接不同格式的视频文件,浏览器将使用第一个可识别的格式。

支持多种格式

总结

audio总结