HTML5背景音乐的暂停与播放-阿里云开发者社区

开发者社区> niunan> 正文

HTML5背景音乐的暂停与播放

简介: HTML代码:                                                                    JS代码:  //背景音乐停止与播放         function swap_music() {             var oAudio = document.
+关注继续查看

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();
            }
        }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript、PHP、Golang、Haskell、Elixir,哪个才是最佳编程语言?
  在过去的几年里,我有机会尝试了多种不同的编程语言。   我非常喜欢学习不同的语言、方法和范式。我是一个充满好奇心的人,一直对编程语言十分着迷。每种编程语言都是不同的,在本文中,我们来讨论一下以下五大编程语言的优点以及缺点。
4 0
Vue3.x <script setup> 语法糖详解,助力快速上手Vue3.x【值得收藏】
Vue3.x <script setup> 语法糖详解,助力快速上手Vue3.x【值得收藏】
17 0
高性能渲染十万条数据不卡顿【虚拟滚动】
高性能渲染十万条数据不卡顿【虚拟滚动】
20 0
Spring Boot 基础教程:创建 SpringBoot 项目的 3 种方式
上一篇中我们讲了 Spring Boot 的一些特点及优缺点,这一篇我们就来看看,如何创建一个最简单的 Spring Boot 项目!
7 0
2022年的Flag从搭建博客开始,设计模式,数据结构,算法汇总【手摸手系列】
2022年的Flag从搭建博客开始,设计模式,数据结构,算法汇总【手摸手系列】
4 0
【Elastic Engineering】Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
Kibana:如何在 Linux,MacOS 及 Windows 上安装 Elastic 栈中的 Kibana
7 0
同一浏览器打开两个同源页面引发的bug【@码云 提个小优化】
同一浏览器打开两个同源页面引发的bug【@码云 提个小优化】
15 0
使用APICloud AVM框架开发预约应用
前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。
7 0
+关注
niunan
没有什么网站是数据库增删查改做不了的,如果有,那就不接这单!
237
文章
10
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载