HTML_html自动播放音乐

最新推荐文章于 2024-06-02 12:54:48 发布

m0_67401228

最新推荐文章于 2024-06-02 12:54:48 发布

阅读量3.8k

点赞数 2

分类专栏：前端 html 文章标签： html javascript css3

本文链接：https://blog.csdn.net/m0_67401228/article/details/123422119

版权

前端同时被 2 个专栏收录

32 篇文章 3 订阅

订阅专栏

html

32 篇文章 0 订阅

订阅专栏

自动播放

<audio  autoplay="autoplay" loop  id="music">
	<source src="http://music.163.com/song/media/outer/url?id=1308256434" audio="" >
</audio>

点击播放

<audio  autoplay loop  id="music">
	<source src="http://music.163.com/song/media/outer/url?id=1308256434" audio="" >
</audio>
function onmusic(){
	document.getElementById('music').play();		//播放
}

判断播放暂停

<div id="btn">播放暂停</div>


var audio = document.getElementById("music");
var btn = document.getElementById("btn");
btn.onclick = function () {         //点击按钮播放停止
    if (audio.paused) { //判断当前的状态是否为暂停，若是则点击播放，否则暂停
        audio.play();
    }else{
        audio.pause();
    }
};

完整实例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放</title>
</head>
<style>
    #btn {
        width: 30px;
        height: 30px;
        background: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3602163562,639853602&fm=26&gp=0.jpg") no-repeat;
        background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -ms-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        position: fixed;
        top: 2.1866666666666665rem;
        right: 0.22rem;
        z-index: 6666;
    }
</style>

<body>
    <div id="btn">
        <audio id="audio-player" ref="audio" preload="preload" autoplay="autoplay" loop="loop">
            <source src="http://music.163.com/song/media/outer/url?id=1840182219" type="audio/mpeg">
            Your browser does not support the audio tag.
        </audio>
    </div>
</body>

</html>
<script>
    let isWeixin = () => {
        let ua = window.navigator.userAgent.toLowerCase()
        return;
        /micromessenger/
            .test(ua)
    }
    // method 自动播放
    let audioPlayer = (id) => {
        let audio = document.getElementById(id)
        if (isWeixin()) {
            document.addEventListener(
                'WeixinJSBridgeReady'
                , () => {
                    audio.play()
                }, false);

            // 添加 getNetworkType 的判断原因, 请看问题分析2
            if (typeof window.
                WeixinJSBridge
                ==
                "object"
                && typeof window.
                    WeixinJSBridge
                    .invoke ==
                "function"
            ) {
                window.
                    WeixinJSBridge
                    .invoke(
                        'getNetworkType'
                        , {}, () => {
                            audio.play()
                        })
            }
        } else {
            // audio.play();
            let touchPlay = () => {
                audio.play();
                document.removeEventListener(
                    'touchstart'
                    , touchPlay, false)
            };
            if (audio.paused) {
                document.addEventListener(
                    'touchstart'
                    , touchPlay, false)
            }
        }
    }
    // 使用
    audioPlayer(
        'audio-player'
    );

    var audio = document.getElementById("audio-player");
    var btn = document.getElementById("btn");
    var rotateVal = 0;

    var InterVal;     // 定时器
    // 设置定时器
    function rotate() {
        InterVal = setInterval(function () {
            rotateVal += 4;
            // 设置旋转属性(顺时针)
            btn.style.transform = 'rotate(' + rotateVal + 'deg)';
            // 设置旋转属性(逆时针)
            //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
            // 设置旋转时的动画  匀速0.1s
            btn.style.transition = '0.1s linear'
        }, 100)
    }
    // rotate();
    btn.onclick = function () {         //点击按钮播放停止
        if (audio.paused) { //判断当前的状态是否为暂停，若是则点击播放，否则暂停
            audio.play();
            rotate()
        } else {
            audio.pause();
            clearInterval(InterVal)
        }
    };

</script>

m0_67401228

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
HTML_html自动播放音乐

自动播放<audio autoplay="autoplay" loop id="music"> <source src="http://music.163.com/song/media/outer/url?id=1308256434" audio="" ></audio>点击播放<audio autoplay loop id="music"> <source src="http://music.163.com/song/media/
复制链接

扫一扫