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

时间: 2024-10-13 07:35:18

HTML5背景音乐的暂停与播放的相关文章

js控制html5 audio的暂停、播放、停止

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> 音乐 <audio src

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP

HTML5 audio标签自制音乐播放器

相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码) 实现的功能 播放暂停(点击切换播放状态) 下一曲(切换下一首) 随机播放(当前歌曲播放完自动播放下一曲) 单曲循环(点击随机播放图标可切换成单曲循环) 音量调节(鼠标移入滑动设置音量大小) 歌曲进度条(可点击切换进度直接跳,也可以点击小

HTML5和jQuery轻量级音频播放器

Light-AudioPlayer是一款基于jQuery,HTML5和CSS3的轻量级音频播放器插件.该音乐播放器采用CSS3制作界面,具有体积小,自适应各种屏幕等特点.可以在桌面和移动设备中正常工作.该音乐播放器的特点有: 轻量级:整个插件在JS.CSS压缩后最小只有4KB 快速响应:采用CSS3特性,自适应各种屏幕,使Light AudioPlayer在手机和平板上也能良好的运作 触摸支持:你可以用光标,也可以用你的手指.每一个动作都有它的触摸事件的定义和功能 JavaScript被禁用?不

控制加载的swf动画暂停和播放

外部加载进来的swf动画(无论是as2.0的还是as3.0的)可以控制暂停和播放,声音也能暂停和播放,但是注意的一点,导入的声音必须是“数据流”.请看以下代码: Main.as: package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; /** *@author hypo.chen *@E-mail [email protected] *@data 201

CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Settings\guo\Local Settings\Application Data\Google\Chrome\Application\24.0.1312.57的下面有一个文件ffmpegsumo.dll. 复制出来,替换掉CEF3的同名文件.就好了.

html5 背景音乐 js控制播放 暂停

<html> <head> <title> 测试页面 </title> <script src="jquery.min.js"></script><!--没有试用jquery,没有用,我用的是getElementById--> </head> <body> <script type="text/javascript"></script>

HTML5实现Winamp2.9音频播放器插件

Winamp2-js是一款使用html5和javascript来实现Winamp 2.9音频播放器的插件.该Winamp音频播放器插件有支持拖拽文件,自定义皮肤,支持可视化模式等特点.特点还有: 实际的Winamp皮肤文件存储在本地计算机上,你可以任意调用自己的Winamp 2皮肤. 可以通过拖拽.弹出按钮或"options"按钮来调用本地音频文件或皮肤. 有两种可视化模式:示波器和曲谱模式. 支持热键. 支持"Shade"迷你模式. 在线演示:http://www

HTML5+ 手机端录音和播放录音

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>录音播放</title> <script type=&quo