HTML添加背景音乐(embed、audio)

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音乐</title>

    <meta charset="utf-8">

<!--embed标签写在<head>里面的title标签下-->
   

<embed src="C:\Users\Administrator\Desktop\告白气球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 说明：

1、src：文件路径。

2、hidden="true"表示隐藏音乐播放按钮，相反使用hidden="false"表示开启音乐播放按钮。

3、autostart="true" 表示是打开网页加载完后自动播放。

4、loop="true"表示 循环播放 如仅想播放一次则为：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白气球.mp3">       

</audio>

<!-- 说明：

1、autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。

2、controls="controls"，则为了在页面内显示显示控件，如播放按钮。

3、"loop="loop"，则是为了使背景音乐重复播放。

4、preload="auto"，则音频在页面加载的同时进行加载，并预备播放。

5、src=""，即是在""内加入背景音乐的保存路径，如：src=""。

注：若是想播放按钮隐藏，则使用以下语句：

直接使用css 的display控制audio标签的显示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

慨激昂的背景音乐能让人感到非常快乐、正能量和感动，人们通常会使用激励和鼓舞性的音乐进行体育锻炼、学习、运动、演讲、生活课程、工作等等。这种类型的音乐有时也很适合婚礼和爱情故事片。下面列出了慷慨激昂的背景音乐，这些背景音乐也非常适用于视频、短视频等。

【1】Black Hearted Woman

https://agm.hifiveai.com/song-detail/299087.html

强烈激昂的迷幻摇滚乐，令人兴奋、充满活力和热情。在城市闪烁的灯光下，随着时髦的节奏跳舞。适用于游戏bgm、音乐节、运动、影视配乐等场景。

【2】Prophet And Loss

https://agm.hifiveai.com/song-detail/284678.html

史诗、慷慨激昂的背景音乐，紧张、激动人心的气氛，戏剧化的弦乐，形成一个史诗和英雄的主题。许多的关键点和中断点使重新安排变得容易。适用于游戏bgm、动作冒险、影视配乐等场景。

【3】The Masked Avenger

https://agm.hifiveai.com/song-detail/289806.html

在这首强烈、节奏愉悦，以弦乐和铜管演奏的慷慨激昂的背景音乐，充满正能量。适用于游戏bgm、动作冒险、影视配乐等场景。

【4】Let Go

https://agm.hifiveai.com/song-detail/369596.html

快节奏且重要的器乐，具有戏剧性的吉他演奏，充满活力的节奏和前卫的摇滚乐。适用于游戏bgm、音乐节、运动、影视配乐等场景。

【5】March Of The Dolls

https://agm.hifiveai.com/song-detail/299579.html

鼓舞人心的电子摇滚主题，配以沉重的吉他。自信，积极进取和充满态度。完美搭配，令人慷慨激昂的背景音乐，适用于动作和充满活力的视频，高能量产品演示以及其他令人振奋的视觉效果。

更多慷慨激昂的的音乐作品，可在曲多多（AGM）商用音乐授权官网（agm.hifiveai.com）试听、下载试用、获取正版配乐授权。

切图网一个客户项目中，用到了背景音乐，采用了html5 audio标签，并且设置了 autoplay 自动播放，在PC上正常，但是一到手机下就无法自动播放。

即便使用JS ,调用audio 对象的播放方法 play() 也不能自动播放！这是为什么呢？

于是打破砂锅问到底的决心，做了好多种demo，例子

http://m.slicy.cn/bg-music.html

测试，苹果、安卓还是不行，最后发现真相的我，眼泪掉下来。原因在这：

为了防止不必要的自动播放浪费流量，手机网页访问带有audio的页面是不会自动播放的。

Safari屏蔽了autoplay，必须由用户交互事件触发，因为autoplay在移动网络环境下可能会造成用户流量费剧增

下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.

在线咨询

上一篇：springboot023学生宿舍管理系统-计算机毕业设计源码+LW文档
下一篇：前端如何实现.md文件转换成.html文件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML添加背景音乐(embed、audio)

您的项目需求