小说听书插件【改进版】

效果

原来找到的听书插件不会用

学了js后就能看懂怎么用了

也改进了一下，使用也变的很简单。

不止狂雨cms能用，其他小说cms也能用

使用

新建js文件，将js文件引入小说阅读页，然后找到包含小说内容的div层或其他元素的类名，将js文件里var mainTextWrap = document.querySelector('.read-section'); 中的read-section

换成你找到的类名就行了

var Audio = new Audio();
        var audios = [];
        var mainTextWrap = document.querySelector('.read-section');
        mainTextWrap.setAttribute('id', 'contents');
        var id =  mainTextWrap.getAttribute('id');
        /*
        id：章节内容块的ID
        */
        function t(id) {
            if (document.getElementById('ts') == null) {
                addBody();
            }
            // 获取小说内容
            var content = document.getElementById(id).innerHTML.trim()
                .replace("\n", "。")
                .replace("\r\n", "。")
                .replace(" ", "，")
                .replace(/ /ig, "，")
                .replace(/http:\/\//ig, "")
                .replace(/<.+?>/g, "");
            var p = Math.ceil(content.length / 500);
            for (i = p; i > 0; i--) {
                // substring(s,y)获取从x到y的字数
                var curText = content.substring(((i - 1) * 500), i * 500).trim();
                //if(i == p) curText += "";
                // encodeURI() 函数可把字符串作为 URI 进行编码
                curText = encodeURI(encodeURI(curText));
                //type=tns：数据类型
                //spd=5：语速，可以是1-9的数字，数字越大，语速越快。
                //vol=15：音量
                //per=0：发声，0女生，1男生，3逍遥，4软萌（可能还有其它的，自行测试吧）
                //tex=**：需要播放的文字
                // 在audios数组的后面添加音频
                audios.push("https://ai.baidu.com/aidemo?type=tns&spd=5&pit=5&vol=15&dt=1&per=0&tex=" + curText);
            }
            // controls 属性是一个布尔属性。如果属性存在，它指定音频控件的显示方式
            Audio.controls = true;
            // 页面一旦加载，就开始加载音频
            Audio.preload = true;
            //Audio.autoplay = true;
            // 设置音频循环播放
            Audio.loop = false;
            if (audios.length > 1) {
                Audio.addEventListener('ended', playNext, false);
            }
            Audio.src = audios.pop();
            Audio.style.position = "relative";
            //Audio.style.left = "15%";
            Audio.style.zIndex = "99999999999999";

            var c = document.getElementById("ts");
            c.insertBefore(Audio, c.childNodes[0]);
        }
        function addBody() {
            // 创建div块
            var div = document.createElement("div");
            // div的ID设为ts
            div.id = "ts";
            div.style.display = "none";
            // 获取第一个body元素对象
            var body = document.getElementsByTagName("body")[0];
            // 在body的第一个子节点之前插入div
            body.insertBefore(div, body.childNodes[0]);
            // 定义style字符串           
            var style = ".headset{width:3rem;height:3rem;border-radius:50%;position:fixed;right:.1rem;bottom:10rem;background-color:rgba(0,0,0,.5);z-index:99999999}.headset:before{content:'听';color:#fff;text-align:center;line-height:2rem;display:block;width:2rem;height:2rem;border-radius:50%;background-color:rgba(0,0,0,.5)!important;-webkit-background-size:50% 50%;background-size:50% 50%;margin:.5rem}.headset1{width:3rem;height:3rem;border-radius:50%;position:fixed;right:.1rem;bottom:10rem;background-color:rgba(0,0,0,.5);z-index:99999999}.headset1:before{content:'...';color:#fff;text-align:center;display:block;width:2rem;height:2rem;border-radius:50%;background-color:rgba(0,0,0,.5)!important;-webkit-background-size:50% 50%;background-size:50% 50%;margin:.5rem}";
            // 创建style标签，名称为ele
            var ele = document.createElement("style");
            // ele的内容插入样式
            ele.innerHTML = style;
            // 在头部插入子节点ele
            document.getElementsByTagName('head')[0].appendChild(ele)
            // 创建div块节点
            var divT = document.createElement("div");
            divT.id = "headset";
            divT.className = "headset";
            // 添加属性：onclick="hearBook"
            divT.setAttribute("onclick", "hearBook()");
            document.getElementsByTagName('body')[0].appendChild(divT)
        }
        function hearBook() {
            // Audio.paused检查音频是否已暂停
            // 暂停输出true，播放就是false
            if (!Audio.paused) {
                // 播放和暂停
                Audio.pause();
                // 为ID为#headset的元素设置class="headset"
                $("#headset").attr("class", "headset")
            }
            else {
                Audio.play();
                $("#headset").attr("class", "headset1")
            }
        }
        function playNext() {
            Audio.src = audios.pop();
            Audio.play();
            !audios.length && Audio.removeEventListener('ended', playNext, false);
        }
        t(id);