h5播放音乐

拼搏现实的明天。 2022-08-05 02:53 295阅读 0赞

h5音频播放，里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp

<audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
    </audio>

html部分：

<div style="z-index: 999; width: 30px; height: 30px; position: absolute; top: 2%; left: 89%; cursor: pointer;" id="mplay"> 
       <audio autoplay="autoplay" loop="loop" id="audio" src="http://www.eyee.cn/Public/Uploads/images/2015/04/27/699/553df80928571.mp3"> 
    使用本地音乐
       </audio> 
    </div>

js效果：可以通过点击一张图片来控制音乐的播放和暂停

var sj_music = true;
          var music = document.getElementById("audio");
          $("#mplay").click(function(){
              if(sj_music){
                $(this).css("background-image","url(images/musicoff.png)");
                music.pause();
                sj_music = false;
              }else{
                $(this).css("background","url(images/musicon.png)");
                music.play();
                sj_music = true;
              }          
          });

效果如下：

播放时效果

暂停时效果

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5播放rtmp流 h5 rtmp播放器 web播放器 H5播放rtsp流

经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；除了HTTP、WebSocket类的传输

╰半橙微兮°/ 2023年10月13日 21:01/ 0 赞/ 42 阅读

相关 H5播放视频流

代码 <html> <head> <title>视频直播</title> <meta charset="utf-8">

浅浅的花香味﹌/ 2023年01月22日 11:55/ 0 赞/ 270 阅读

相关 android音乐播放

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[点击跳转到教程][Link 1] 布局就几个按钮 ![在这里插入图片描述][2021

╰半橙微兮°/ 2023年01月03日 04:22/ 0 赞/ 295 阅读

相关 H5 自动播放背景音乐

html: <audio id="audio" controls loop autoplay preload hidden>

- 日理万妓/ 2022年09月11日 13:26/ 0 赞/ 257 阅读

相关 h5播放音乐

h5音频播放，里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp <audio control

拼搏现实的明天。/ 2022年08月05日 02:53/ 0 赞/ 296 阅读

相关 h5视频播放

html5提供的有视频播放功能，标签可以使用video demo如下： <div class="video"> <video src="video/Vision

谁借莪１个温暖的怀抱￠/ 2022年08月03日 12:55/ 0 赞/ 328 阅读

相关 H5 音乐代码

$("music_btn").click(function() { var music = document.getElementById("Jaudi

逃离我推掉我的手/ 2022年06月09日 05:12/ 0 赞/ 219 阅读

相关 h5 audio 背景音乐播放开关控制

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。 ![这里写图片描述][70] ![这里写图片描述][70 1] 上面是开关的按钮，页面刚加载进来的时

迈不过友情╰/ 2022年05月31日 07:50/ 0 赞/ 701 阅读

相关 H5视频，播放，暂停，重新播放

H5视频，播放，暂停，重新播放 ```<!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2022年05月08日 00:10/ 0 赞/ 402 阅读

相关 HTML 5 网页播放音乐

我主要使用的是 audio 标签播放音乐,网上还有其他方法可以自行查找. 一个简单的案例: <audio src="a.mp3" autoplay loop>

谁借莪１个温暖的怀抱￠/ 2022年04月06日 15:24/ 0 赞/ 398 阅读