zoukankan      html  css  js  c++  java
  • h5播放音乐

    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;  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"> 
    <!--    <source src="song.mp3" type="audio/mpeg"></source> -->使用本地音乐
       </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;
              }          
          });
    
    效果例如以下:
    播放时效果
    暂停时效果
  • 相关阅读:
    scala
    数据结构(01)
    基本算法(07)
    基本算法(06)
    基本算法(05)
    git pull文件时和本地文件冲突的问题
    获取两个日期之间的日期形成一个集合
    lombok的简单介绍(2)
    springboot启动报错
    逆向工程的创建
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/7100560.html
Copyright © 2011-2022 走看看