初学者都能实现的原生js实现后台播放音乐

最新推荐文章于 2024-09-27 15:07:53 发布

彩虹鼻屎跳跳糖

最新推荐文章于 2024-09-27 15:07:53 发布

阅读量1.1k

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/TurkeyZ/article/details/129268086

版权

这篇博客介绍了如何使用JavaScript实现网页背景音乐的播放和暂停功能。通过window.onload事件确保音乐元素加载完成，然后利用document.getElementById获取DOM元素进行操作。点击按钮时，通过audio对象的play()和pause()方法切换音乐状态，并更新按钮图片以反映当前状态。此外，还提到了<audio>和<img>标签的使用，以及如何通过onClick和id属性链接JavaScript函数。

摘要由CSDN通过智能技术生成

HTML部分代码：
<audio id="music" src="bgm.mp3"  loop autoplay="autoplay"></audio>
<img src="headimg/open.jpg" onClick="play()" alt

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

彩虹鼻屎跳跳糖

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

javascript实现网页背景音乐自动播放

希望我的博客，能帮上你解决学习中工作中所遇到的问题

10-31

5193

javascript实现网页背景音乐自动播放

js 自动播放背景音乐源码

07-25

js 自动播放背景音乐源码，测试了多次。兼容苹果，安卓，适用所有机型！

参与评论您还未登录，请先登录后发表或查看评论

原生js全局音乐播放

最新发布

oneya1的博客

09-27

380

如果需要点击按钮后暂停音乐播放，可直接调用bgm.toggleBGM();新建index.html 引入script.js。2.新建script.js。效果暂时（音乐没录进去）

js自动播放音频

希望我的博客，能帮上你解决学习中工作中所遇到的问题,也期待与您一起探讨技术问题，共同成长。

12-23

6685

var mp3 = new Audio('xxxx.mp3'); // 创建音频对象 mp3.play(); // 播放 mp3.pause(); // 暂停 mp3.load(); // 重载

JS写一个漂亮的音乐播放器

沉默的小猴子的博客

11-08

5892

先放上效果图：正如图中所展示的播放器那样，我们用HTML+CSS+JS将这个效果实现出来。 HTML页面布局 <div class="music"> <div class="photo"> <div class="photo_pic" id="photo_pic"><img src="" width

Js实现简单的音频播放

weixin_30389003的博客

01-06

405

现效果如下：由于我这边不需要其他按钮，就没写数据是由后台提供，在这做了个小列子后台代码 public ActionResult MusicPlayer(int musicId=0) { MusicPlayerModel model = new MusicPlayerModel(); switch (musicId...

用js实现一个简单的音乐播放器

qq_55299191的博客

04-16

1613

实现了音乐器的简单功能，播放暂停，快进后退，音量加减，进度条的显示，以及歌词滚动等功能。这里比较播放时间，出现的播放时间小于数组的播放时间就输出 index-1。课堂作业记录，js部分我真的有点写不来hhh，有参考。用margin-top: -height;歌词直接去网站搜索提取，这个网站可以。写一个active样式。

基于SSM框架音乐网站的设计与实现_免费音乐网站

12-29

《基于SSM框架音乐网站的设计与实现》是一个典型的Web应用开发项目，主要采用了Spring、SpringMVC和MyBatis这三大主流Java企业级框架。...对于初学者，这是一个很好的实战项目，有助于理论知识与实际应用的结合。

使用原生js实现的一个适配移动端的网页播放器（纯页面开发）

08-08

在本项目中，我们主要探讨如何使用原生JavaScript来创建一个适配移动端的网页播放器。这个播放器没有依赖任何后台服务，完全基于...对于初学者来说，这是一个很好的实践项目，可以帮助他们更好地理解和运用JavaScript。

（哇小侠）微信小程序学习用demo：音乐播放控制.zip

03-13

通过查看和学习这些代码，初学者可以理解如何实现音乐播放功能，并学习到如何组织和管理小程序项目。总的来说，这个项目是一个很好的学习资源，它涵盖了微信小程序的基础知识、音乐播放控制的实践以及项目的实际...

微信小程序 - 个人音乐台（源码+截图）

02-17

这涉及到音频播放API的使用，如微信小程序的`wx.playBackgroundAudio`方法，用于实现后台播放音乐，并能通过`wx.getBackgroundAudioManager`获取音乐播放控制器进行更细致的操作。 3. **数据存储与请求**：音乐数据...

js实现MP3音乐播放

10-21

可通过配置js来实现MP3播放功能，只需要在调用js时实例一下对象，调用一下播放方法并把MP3地址传进去就可以了，非常方便

HTML+Javascript实现点击图片自动播放背景音乐

12-27

用HTML+Javascript实现点击图片自动播放背景音乐。精巧实用，值得参考！

基于JavaScript实现简单的音频播放功能

11-30

现效果如下：由于我这边不需要其他按钮，就没写数据是由后台提供，在这做了个小列子后台代码 public ActionResult MusicPlayer(int musicId=0) { MusicPlayerModel model = new MusicPlayerModel(); switch (musicId) { default: model.MusicName = "Believe-动画《海贼王》"; model.CoverImg = "/Content/Music/Believe-cover.jpg"; model.F

html，css，js实现前端歌曲播放

09-15

h5播放器

JavaScript 音乐播放器

weixin_44567289的博客

03-26

1313

JavaScript 音乐播放器主要功能：快进、快退、暂停、上下一首、禁音、鼠标控制音量、自动下一首、显示歌名 <html> <head> @*不提供音频*@ <meta name="viewport" content="width=device-width" /> <title>ceshi14</title> ...

js简单开发的音乐播放器

qq_50951790的博客

11-14

2091

音乐播放器

Js简单实现音乐播放器

weixin_43802072的博客

01-23

6031

Js简单实现音乐播放器HTML部分CSS部分js代码部分这段时间正好是寒假，闲来无事把大二学的web再温习了一遍，在学习到Js时，想找一些小玩意来练练手，于是我就用原生Js做了一个简单音乐播放器。音乐播放器功能如下：支持上、下一首歌切换开始、暂停音量调整音乐图片的旋转实现效果 HTML部分 html部分实现了简单的页面布局，作为音乐播放器的按键我选择了从fontawesome图库中导入，也就是我们看到的i标签（下载地址：http://www.fontawesome.com.cn/）代码

原生JS实现图片轮播与淡入效果实例解析

本文档提供了一个使用原生JavaScript实现图片轮播和淡入效果的简单示例。作者在遇到对CSS兴趣下降的情况后，转而专注于JavaScript的学习，尤其是轮播功能的开发，以此来提升自己的技能。通过实现图片淡入效果，作者...