`
niunan
  • 浏览: 725924 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

HTML5背景音乐的暂停与播放

 
阅读更多

HTML代码:
    <audio id="myaudio" loop="loop" preload="auto" autoplay="autoplay">
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/ogg" />
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/mp3" />
                </audio>

       <img onclick="swap_music()" src="/images/icon_music.png" style="height:30px; vertical-align:middle;" />

JS代码:
 //背景音乐停止与播放
        function swap_music() {
            var oAudio = document.getElementById('myaudio');
            if (oAudio.paused) {
                oAudio.play();
            }
            else {
                oAudio.pause();
            }
        }

分享到:
评论

相关推荐

    H5背景音乐播放暂停加图标自动旋转功能,支持微信内自动播放代码实例

    在本文中,我们将深入探讨如何在HTML5(H5)页面中实现背景音乐播放与暂停功能,同时结合图标状态显示和微信内的自动播放特性。这个功能对于创建互动性更强的网页体验至关重要,尤其是在社交媒体平台如微信中。 ...

    html5实现自动播放以及暂停播放功能背景音乐代码.zip

    这个压缩包中的代码正是针对如何利用HTML5的API实现自动播放和暂停背景音乐的功能。 首先,让我们来看看`&lt;audio&gt;`标签的基本结构: ```html &lt;audio id="myAudio" src="music.mp3"&gt;&lt;/audio&gt; ``` 这里的`id`属性...

    HBuilder:微信h5实现音乐图标旋转播放,停止暂停

    本文将详细介绍如何使用HBuilder在微信H5环境中实现音乐图标旋转播放、停止和暂停的功能。 首先,我们需要创建一个H5页面,这可以通过HBuilder的内置模板或新建空白页面来完成。在HTML结构中,我们需要一个音乐播放...

    html5旋转音乐图标,控制背景音乐jquery.rotate

    在HTML5中,实现一个可旋转的音乐图标来控制背景音乐播放是常见的交互设计,尤其在制作互动式网页或H5应用时。本项目通过jQuery库实现这一功能,提供了友好的用户界面,允许用户轻松地暂停和开始背景音乐。下面我们...

    H5背景音乐自动播放问题

    在H5页面中,背景音乐的自动播放和暂停是一个常见的需求,特别是在游戏、教育和多媒体应用中。然而,由于浏览器的限制,实现这一功能并非总是那么简单。以下是对这个主题的详细探讨。 首先,我们需要理解为什么H5...

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

    在这个场景下,"HTML+Javascript实现点击图片自动播放背景音乐"是一个很好的示例,它结合了两种核心技术来实现用户交互。HTML(超文本标记语言)是网页的基础结构,而JavaScript则提供了动态效果和交互性。 首先,...

    js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    HTML5带背景音乐播放器代码.zip

    为了实现播放、暂停、切换等功能,我们需要用到JavaScript与HTML5 Audio API进行交互。JavaScript可以通过获取`&lt;audio&gt;`元素的引用,然后调用其提供的方法来控制音频的播放。例如: ```javascript var audio = ...

    krpano加入背景音乐文件及插件

    在本文中,我们将深入探讨如何在krpano项目中添加背景音乐以及使用相关的插件。首先,让我们了解krpano的基本概念,然后逐步解析如何实现背景音乐功能。 krpano是一个基于Flash和HTML5的全景图像和虚拟现实视图的...

    html添加背景音乐demo

    总结来说,"html添加背景音乐demo"是一个关于如何使用HTML5的`&lt;audio&gt;`标签来在网页中添加背景音乐的实践案例。通过合理地配置`&lt;audio&gt;`标签的属性和使用`source`标签,我们可以实现跨浏览器的音频播放,并通过...

    php页面添加背景音乐 控制停止/播放

    在PHP页面上添加背景音乐并实现播放和停止的控制,主要涉及到HTML5的音频API以及JavaScript的交互。这里我们将详细探讨这个过程,并提供一个简单的实现示例。 首先,我们需要在HTML页面中创建一个`&lt;audio&gt;`元素,这...

    HTML插入背景音乐

    &lt;title&gt;HTML背景音乐示例 欢迎访问我的网站 这是一个使用HTML插入背景音乐的例子。 &lt;!-- 使用embed标签 --&gt; &lt;!-- 或者使用object标签 --&gt; &lt;/html&gt; ``` #### 总结 本文详细介绍了在HTML中插入背景...

    网页背景音乐控制

    网页背景音乐控制是网页制作中的一个重要...总结来说,网页背景音乐控制涉及HTML5的`&lt;audio&gt;`标签,JavaScript的音频API,以及与动画的协调。通过合理的设计和编程,我们可以创建出既吸引人又尊重用户选择的网页体验。

    背景音乐html 代码

    综上所述,通过HTML5的`&lt;audio&gt;`元素,我们可以方便地在网页中添加背景音乐,并通过属性和JavaScript进行控制。在实际应用中,需要考虑到兼容性、性能优化和版权等因素,以提供一个良好的用户体验。在提供的压缩包中...

    html设置背景音乐实例

    下面是一个基本的HTML背景音乐设置示例: ```html Your browser does not support the audio element. ``` 这段代码中,`&lt;audio&gt;`标签定义了一个音频播放器。`autoplay`属性表示页面加载后自动播放音乐,`...

    有关HTML5中背景音乐的自动播放功能

    在HTML5中,背景音乐的自动播放功能是一个重要的特性,允许网页中的音频元素在页面加载完成后立即开始播放。然而,由于不同浏览器和设备的安全策略,尤其是考虑到用户体验和数据消耗,自动播放并不总是能够顺利实现...

    Asp音乐播放程序(可做网站背景音乐)

    在“Asp音乐播放程序”中,这些脚本可能包括处理音乐播放控制(如播放、暂停、停止、上一曲、下一曲)、音乐文件的读取和流传输、以及与后台管理系统的通信等功能。 音乐播放器的后台管理功能是这个系统的重要组成...

    仿h5页面右上角的音乐按钮(可播放可暂停)

    在开发微信小程序或者类似H5页面时,常常需要实现一种功能:在页面右上角放置一个音乐播放控制按钮,用户可以随时播放或暂停背景音乐。这个功能对于提升用户体验,特别是对于那些希望为用户提供沉浸式体验的音乐、...

    背景音乐跳转不重复播放解决办法

    总结,实现背景音乐跳转不重复播放的方法主要包括:使用HTML5的`&lt;audio&gt;`标签,监听`ended`事件,维护音频列表和当前播放的索引,以及在播放结束时判断是否跳转到下一个音频。在实际项目中,可能还需要处理网络错误...

    基于html5的音乐播放器.zip

    虽然"基于HTML5的音乐播放器"主要关注音频处理,但HTML5的游戏框架,如Phaser,也可以结合`&lt;audio&gt;`标签为游戏提供背景音乐和音效。 此外,HTML5的离线存储能力(如localStorage和indexDB)也是其强大之处。这些...

Global site tag (gtag.js) - Google Analytics